fix divider page 1

WebmasterCamp · Jul 16, 2023 · c3e39df · c3e39df
1 parent 604f903
commit c3e39df
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 56 deletions.
diff --git a/src/components/Divider.tsx b/src/components/Divider.tsx
@@ -1,3 +1,3 @@
 export const Divider = () => {
-	return <div className="w-full h-[0px] border border-gray-300 my-12" />
+	return <div className="w-full h-[0px] border border-gray-300" />
 }
diff --git a/src/pages/expenses/1/index.tsx b/src/pages/expenses/1/index.tsx
@@ -8,68 +8,71 @@ import { Layout } from '~/components/Layout/Layout'
 import { Select } from '~/components/Select'
 import { Steps, type StepsProps } from '~/components/Step/Steps'
 
-export const expensesSteps: StepsProps["items"] = [
-  {
-    prompt: "กรอกข้อมูลรายได้",
-    step: 1,
-  },
-  {
-    prompt: "วางแผนการเงิน",
-    step: 2
-  },
-  {
-    prompt: "สรุปแผนการเงิน",
-    step: 3
-  }
+export const expensesSteps: StepsProps['items'] = [
+	{
+		prompt: 'กรอกข้อมูลรายได้',
+		step: 1,
+	},
+	{
+		prompt: 'วางแผนการเงิน',
+		step: 2,
+	},
+	{
+		prompt: 'สรุปแผนการเงิน',
+		step: 3,
+	},
 ]
 
 interface SelectOption {
-  value: string
-  label: string
+	value: string
+	label: string
 }
 
 const ExpensesPage = () => {
+	if (expensesSteps[0]?.prompt) {
+		expensesSteps[0].active = true
+	}
 
-  if (expensesSteps[0]?.prompt) {
-    expensesSteps[0].active = true
-  }
-
-  const monthlyIncome: SelectOption[] = []
-  const monthlyDebt: SelectOption[] = []
-  const savings: SelectOption[] = []
-  const assets: SelectOption[] = []
-  return (
-    <Layout>
-      <ExpenseLayout title="เริ่มคำนวณวางแผนการเงินให้ลูกในอนาคตของคุณ" description="เริ่มคำนวณวางแผนการเงินให้ลูกในอนาคตของคุณ">
-
-        <Steps items={expensesSteps} />
-        <Divider />
-        <div className="flex flex-col items-center">
-          <div>
-            <div className="text-gray-900 text-4xl font-semibold">
-              กรอกข้อมูลเพื่อเริ่มต้นวางแผนการเงิน
-            </div>
-            <div className="mt-10 flex gap-16">
-              <div className="flex flex-col gap-8">
-                <Select label="รายได้ต่อครัวเรือน/เดือน" options={monthlyIncome} />
-                <Select label="มูลค่าเงินออมสะสม" options={monthlyDebt} />
-              </div>
-              <div className="flex flex-col gap-8">
-                <Select label="หนี้สินต่อครัวเรือน/เดือน" options={savings} />
-                <Select label="มูลค่ารวมสินทรัพย์อื่น" options={assets} />
-              </div>
-            </div>
-          </div>
-          <Link href="/expenses/2" className="mt-8">
-            <Button className="w-[505px] mt-16">
-              เริ่มต้นวางแผนการเงินแบบละเอียด
-              <AiOutlineArrowRight className="ml-2" />
-            </Button>
-          </Link>
-        </div>
-      </ExpenseLayout>
-    </Layout>
-  )
+	const monthlyIncome: SelectOption[] = []
+	const monthlyDebt: SelectOption[] = []
+	const savings: SelectOption[] = []
+	const assets: SelectOption[] = []
+	return (
+		<Layout>
+			<ExpenseLayout
+				title="เริ่มคำนวณวางแผนการเงินให้ลูกในอนาคตของคุณ"
+				description="เริ่มคำนวณวางแผนการเงินให้ลูกในอนาคตของคุณ"
+			>
+				<div className="flex flex-col gap-12">
+					<Steps items={expensesSteps} />
+					<Divider />
+					<div className="flex flex-col items-center">
+						<div>
+							<div className="text-gray-900 text-4xl font-semibold">
+								กรอกข้อมูลเพื่อเริ่มต้นวางแผนการเงิน
+							</div>
+							<div className="mt-10 flex gap-16">
+								<div className="flex flex-col gap-8">
+									<Select label="รายได้ต่อครัวเรือน/เดือน" options={monthlyIncome} />
+									<Select label="มูลค่าเงินออมสะสม" options={monthlyDebt} />
+								</div>
+								<div className="flex flex-col gap-8">
+									<Select label="หนี้สินต่อครัวเรือน/เดือน" options={savings} />
+									<Select label="มูลค่ารวมสินทรัพย์อื่น" options={assets} />
+								</div>
+							</div>
+						</div>
+						<Link href="/expenses/2" className="mt-8">
+							<Button className="w-[505px] mt-16">
+								เริ่มต้นวางแผนการเงินแบบละเอียด
+								<AiOutlineArrowRight className="ml-2" />
+							</Button>
+						</Link>
+					</div>
+				</div>
+			</ExpenseLayout>
+		</Layout>
+	)
 }
 
 export default ExpensesPage