Merge branch 'main' of github.com:WebmasterCamp/ywc19-hackathon-d

WebmasterCamp · Jul 16, 2023 · 402db57 · 402db57
2 parents 0c276bf + e0f9c6b
commit 402db57
Show file tree

Hide file tree

Showing 5 changed files with 152 additions and 41 deletions.
diff --git a/src/components/Step/StepItem.tsx b/src/components/Step/StepItem.tsx
@@ -1,22 +1,30 @@
-import { type FC } from "react"
+import { type FC } from 'react'
+
+import Link from 'next/link'
 
 export interface StepItemProps {
-    prompt: string,
-    step: number | undefined,
-    active?: boolean
+	prompt: string
+	step: number
+	active?: boolean
 }
 
 const StepItem: FC<StepItemProps> = ({ prompt, step, active = false }) => {
-    return (
-        <div className={`flex flex-col gap-y-2 text-center`}>
-            <div>
-                <h5 className={`inline-block w-fit p-2 rounded-full font-noto text-white text-lg bg-teal-500 ${active ? "outline-teal-700 outline-2 outline-offset-4 outline" : "outline-2"}`}>
-                    {step}
-                </h5>
-            </div>
-            <h2>{prompt}</h2>
-        </div>
-    )
+	return (
+		<Link href={`/expenses/${step}`}>
+			<div className={`flex flex-col gap-y-2 text-center`}>
+				<div>
+					<h5
+						className={`inline-block w-fit p-2 rounded-full font-noto text-white text-lg bg-teal-500 ${
+							active ? 'outline-teal-700 outline-2 outline-offset-4 outline' : 'outline-2'
+						}`}
+					>
+						{step}
+					</h5>
+				</div>
+				<h2>{prompt}</h2>
+			</div>
+		</Link>
+	)
 }
 
-export { StepItem }
+export { StepItem }
diff --git a/src/components/Step/Steps.tsx b/src/components/Step/Steps.tsx
@@ -1,16 +1,23 @@
-import { type FC } from "react";
-import { StepItem, type StepItemProps } from "./StepItem";
+import { type FC } from 'react'
 
-export interface StepsProps { items: StepItemProps[] }
+import { StepItem, type StepItemProps } from './StepItem'
 
-export const Steps: FC<StepsProps> = ({ items }) => {
-    return (
-        <div className="flex justify-center items-center gap-x-4">
-            {
-                items.map((item, index) => (
-                    <StepItem key={index} active={item.active} prompt={item.prompt} step={item.step} />
-                ))
-            }
-        </div>
-    )
-}
+export interface StepsProps {
+	items: StepItemProps[]
+	activeStep: number
+}
+
+export const Steps: FC<StepsProps> = ({ items, activeStep }) => {
+	return (
+		<div className="flex justify-center items-center gap-x-20">
+			{items.map((item, index) => (
+				<StepItem
+					key={index}
+					active={item.step === activeStep}
+					prompt={item.prompt}
+					step={item.step}
+				/>
+			))}
+		</div>
+	)
+}
diff --git a/src/constants/blogs.ts b/src/constants/blogs.ts
@@ -29,4 +29,18 @@ export const blogs: Blog[] = [
 			'ดังนั้นแล้วคุณพ่อคุณแม่จะต้องวางแผนทางการเงินที่รัดกุม มีคุณภาพมากเพียงพอเพื่อการดำเนินชีวิตที่ดีอย่างสวัสดิภาพภายในสังคม',
 		],
 	},
+	{
+		slug: '2',
+		title: 'รีวิวการรับบริการจากจากคุณเกด คุณแม่มือใหม่วัย 27 ปี',
+		imageURL: 'https://picsum.photos/1440/585',
+		tags: ['ค่าใช้จ่าย', 'เลี้ยงดูบุตร'],
+		createdAt: new Date('2023-07-16'),
+		author: 'ปอนด์',
+		readingTime: '5 mins',
+		content: [
+			'คุณเกด พนักงานออฟฟิตและคุณแม่มือใหม่ในวั 27 ปี แต่งงานกับสามีเมื่อปลายปี 62 ที่ผ่านมา หลังการตั้งครรภ์ คุณเกดเล่ากับเราว่าด้วความที่เป็นคนแม่มือใหม่และการวางแผนชีวิตของลูกเป็นเรื่องที่มีความสำคัญอย่างยิ่ง',
+			'คุณเกดเห็นความสำคัญในเรื่องทางการเงินที่คุณเกดและสามีมีความต้องการที่จะ สร้างความมั่นคงสำหรับในอนาคต ลูกในเรื่องของประกันชีวิตที่จะสร้างหลักประกันในการดำเนินชีวิตให้ลูก การศึกษาที่ดีมีคุณภาพเสริมสร้างพัฒนาการของลูก และต้องการสินเชื่อ ด้วยความที่คุณเป็นพนักงานออฟฟิตเงินเดือนของเราไม่ได้เยอะขนาดนั้นในตอนนี้จึงมองหาสินเชื่อเพื่อสร้างความมั่นคงทางครอบครัว เห็นความสำคัญในเรื่องทางการเงินที่สร้างความมั่นคงสำหรับลูก',
+			'ซึ่งหลังการเข้าบริการของเรา คุณเกดเล่าว่าจากที่ไม่รู้อะไรเลย ไม่มีความเข้าใจว่าควรวางแผนการดำเนินการเกี่ยวกับลูกอย่างไร สู่การเข้าใจว่าเราควรทำอย่างไร ทำอะไร เพื่ออนาคตของลูก ตั้งแต่การตั้งครรภ์ การคลอดบุตร วัยทารก และการเติบโตขึ้นอย่างมั่นคงของเขาในอนาคต บริการนี้เป็นบริการที่ช่วยทางด้านการวางแผนที่ดีมาก',
+		],
+	},
 ]
diff --git a/src/pages/expenses/1/index.tsx b/src/pages/expenses/1/index.tsx
@@ -29,12 +29,98 @@ interface SelectOption {
 }
 
 const ExpensesPage = () => {
-	if (expensesSteps[0]?.prompt) {
-		expensesSteps[0].active = true
-	}
-
-	const monthlyIncome: SelectOption[] = []
-	const monthlyDebt: SelectOption[] = []
+	const monthlyIncome: SelectOption[] = [
+		{
+			value: '9999',
+			label: '0 - 9,999',
+		},
+		{
+			value: '19999',
+			label: '10000 - 19,999',
+		},
+		{
+			value: '29999',
+			label: '20000 - 29,999',
+		},
+		{
+			value: '39999',
+			label: '30000 - 39,999',
+		},
+		{
+			value: '49999',
+			label: '40000 - 49,999',
+		},
+		{
+			value: '59999',
+			label: '50000 - 59,999',
+		},
+		{
+			value: '69999',
+			label: '60000 - 69,999',
+		},
+		{
+			value: '79999',
+			label: '70000 - 79,999',
+		},
+		{
+			value: '89999',
+			label: '80000 - 89,999',
+		},
+		{
+			value: '99999',
+			label: '90000 - 99,999',
+		},
+		{
+			value: '100000+',
+			label: '100,000 บาทขึ้นไป',
+		},
+	]
+	const monthlyDebt: SelectOption[] = [
+		{
+			value: '9999',
+			label: '0 - 9,999',
+		},
+		{
+			value: '19999',
+			label: '10000 - 19,999',
+		},
+		{
+			value: '29999',
+			label: '20000 - 29,999',
+		},
+		{
+			value: '39999',
+			label: '30000 - 39,999',
+		},
+		{
+			value: '49999',
+			label: '40000 - 49,999',
+		},
+		{
+			value: '59999',
+			label: '50000 - 59,999',
+		},
+		{
+			value: '69999',
+			label: '60000 - 69,999',
+		},
+		{
+			value: '79999',
+			label: '70000 - 79,999',
+		},
+		{
+			value: '89999',
+			label: '80000 - 89,999',
+		},
+		{
+			value: '99999',
+			label: '90000 - 99,999',
+		},
+		{
+			value: '100000+',
+			label: '100,000 บาทขึ้นไป',
+		},
+	]
 	const savings: SelectOption[] = []
 	const assets: SelectOption[] = []
 	return (
@@ -44,7 +130,7 @@ const ExpensesPage = () => {
 				description="เริ่มคำนวณวางแผนการเงินให้ลูกในอนาคตของคุณ"
 			>
 				<div className="flex flex-col gap-12">
-					<Steps items={expensesSteps} />
+					<Steps items={expensesSteps} activeStep={1} />
 					<Divider />
 					<div className="flex flex-col items-center">
 						<div>

diff --git a/src/pages/expenses/2/index.tsx b/src/pages/expenses/2/index.tsx
@@ -9,14 +9,10 @@ import { expensesSteps } from '../1'
 const items: StepsProps['items'] = expensesSteps
 
 const ExpensesPage = () => {
-	if (items[1]?.prompt !== undefined) {
-		items[1].active = true
-	}
-
 	return (
 		<Layout>
 			<ExpenseLayout title="วางแผนการเงินให้ลูก">
-				<Steps items={items} />
+				<Steps items={items} activeStep={2} />
 				<div className="flex flex-col items-center gap-12 mt-12 px-24">
 					{phases.map((phase) => (
 						<ExpensePhase key={phase.title} phase={phase} />