refactor phase

src/components/pages/expenses/2/ExpenseCategory.tsx

@@ -1,35 +1,29 @@
 import { type FC } from 'react'
 
-import { Button } from 'flowbite-react'
 import { Divider } from '~/components/Divider'
-import { type Category } from '~/constants/categories'
+import { type Phase } from '~/constants/categories'
 
+import { ExpenseSelection } from './ExpenseSelection'
 import { NewCardButton } from './NewCardButton'
 
 interface ExpensePhaseProps {
-	title: string
-	categories: Category[]
+	phase: Phase
 }
 
-export const ExpenseCategory: FC<ExpensePhaseProps> = ({ title, categories }) => {
+export const ExpensePhase: FC<ExpensePhaseProps> = ({ phase: { title, categories } }) => {
 	return (
 		<div className="flex flex-col items-start gap-4 w-full">
 			<div className="text-gray-900 text-4xl font-semibold">{title}</div>
 			<Divider />
-			<div className="w-full grid grid-cols-4 gap-6">
-				{categories.map((category) => (
-					<Button color="light" key={category.title} disabled={category.disabled}>
-						{category.title}
-					</Button>
-				))}
-			</div>
 			<div className="w-full grid grid-cols-4 gap-6">
 				<NewCardButton
 					onClick={() => {
 						alert('test')
 					}}
 				/>
+				{/* TODO: add selected items as cards here */}
 			</div>
+			<ExpenseSelection phase={{ title, categories }} />
 		</div>
 	)
 }

src/components/pages/expenses/2/ExpenseSelection.tsx

@@ -0,0 +1,22 @@
+import { type FC } from 'react'
+
+import { Button } from 'flowbite-react'
+import { type Phase } from '~/constants/categories'
+
+interface ExpenseSelectionProps {
+	phase: Phase
+}
+
+export const ExpenseSelection: FC<ExpenseSelectionProps> = ({ phase }) => {
+	return (
+		<div className="flex flex-col w-full">
+			<div className="w-full grid grid-cols-4 gap-6">
+				{phase.categories.map((category) => (
+					<Button color="light" key={category.title} disabled={category.disabled}>
+						{category.title}
+					</Button>
+				))}
+			</div>
+		</div>
+	)
+}

src/constants/categories.ts

@@ -9,6 +9,11 @@ export interface Category {
 	items?: Item[]
 }
 
+export interface Phase {
+	title: string
+	categories: Category[]
+}
+
 export const preBirthCategories: Category[] = [
 	{
 		title: 'ตรวจสุขภาพมารดา',
@@ -57,3 +62,18 @@ export const kindergartenCategories: Category[] = [
 		disabled: true,
 	},
 ]
+
+export const phases = [
+	{
+		title: 'ค่าใช้จ่ายก่อนคลอดบุตร',
+		categories: preBirthCategories,
+	},
+	{
+		title: 'วัยทารก',
+		categories: babyCategories,
+	},
+	{
+		title: 'วัยอนุบาล',
+		categories: kindergartenCategories,
+	},
+]

src/pages/expenses/2/index.tsx

@@ -1,8 +1,8 @@
 import { ExpenseLayout } from '~/components/Layout/ExpenseLayout'
 import { Layout } from '~/components/Layout/Layout'
 import { Steps, type StepsProps } from '~/components/Step/Steps'
-import { ExpenseCategory } from '~/components/pages/expenses/2/ExpenseCategory'
-import { babyCategories, kindergartenCategories, preBirthCategories } from '~/constants/categories'
+import { ExpensePhase } from '~/components/pages/expenses/2/ExpenseCategory'
+import { phases } from '~/constants/categories'
 
 import { expensesSteps } from '../1'
 
@@ -18,9 +18,9 @@ const ExpensesPage = () => {
 			<ExpenseLayout title="วางแผนการเงินให้ลูก">
 				<Steps items={items} />
 				<div className="flex flex-col items-center gap-12 mt-12 px-24">
-					<ExpenseCategory title="ค่าใช้จ่ายก่อนคลอดบุตร" categories={preBirthCategories} />
-					<ExpenseCategory title="วัยทารก" categories={babyCategories} />
-					<ExpenseCategory title="วัยอนุบาล" categories={kindergartenCategories} />
+					{phases.map((phase) => (
+						<ExpensePhase key={phase.title} phase={phase} />
+					))}
 				</div>
 			</ExpenseLayout>
 		</Layout>