diff --git a/PiggyPocket.pdf b/PiggyPocket.pdf index 9f34a5b..0fa3461 100644 Binary files a/PiggyPocket.pdf and b/PiggyPocket.pdf differ diff --git a/public/next.svg b/public/next.svg deleted file mode 100644 index 5174b28..0000000 --- a/public/next.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/vercel.svg b/public/vercel.svg deleted file mode 100644 index d2f8422..0000000 --- a/public/vercel.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/app/calendar/page.tsx b/src/app/calendar/page.tsx index 389ce97..7a6b3ce 100644 --- a/src/app/calendar/page.tsx +++ b/src/app/calendar/page.tsx @@ -17,7 +17,7 @@ export default function CalendarPage() { {date.toLocaleString("default", { month: "long" })} -
+

Sun

Mon

diff --git a/src/app/favicon.ico b/src/app/favicon.ico deleted file mode 100644 index 718d6fe..0000000 Binary files a/src/app/favicon.ico and /dev/null differ diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 8b4099e..96ebf54 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -8,6 +8,9 @@ const inter = Inter({ subsets: ["latin"] }); export const metadata: Metadata = { title: "PiggyPocket", description: "Generated by create next app", + icons: { + icon: "/images/pig_1.png" + } }; export default function RootLayout({ @@ -24,8 +27,8 @@ export default function RootLayout({ /> -
-
+
+
{children}
diff --git a/src/app/news/news.tsx b/src/app/news/news.tsx new file mode 100644 index 0000000..d317952 --- /dev/null +++ b/src/app/news/news.tsx @@ -0,0 +1,23 @@ +import Link from "next/link"; + +export default function News({ image, title, description, href }: { image: string; title: string; description: string; href: string; }) { + return ( +
+ news_1 +
+

+ {title} +

+

+ {description} +

+ + อ่านเพิ่มเติม + +
+
+ ); +} diff --git a/src/app/news/page.tsx b/src/app/news/page.tsx index 51df119..fe42496 100644 --- a/src/app/news/page.tsx +++ b/src/app/news/page.tsx @@ -1,31 +1,27 @@ import { useState } from "react"; +import News from "./news"; + +const news = [ + { + image: "/images/news_1.png", + title: "บอกต่อ! 5 ทริคเก็บเงินวัยเรียนให้มีเงินก้อนก่อนเรียนจบ", + description: + "อยากมีเงินก้อนก่อนเรียนจบ ต้องทำยังไง สำหรับน้อง ๆ ที่มีความคิดว่าก่อนเรียนจบอยากมีเงินเก็บสักก้อน เพื่อใช้ในการเริ่มต้นสร้างเนื้อสร้างตัว และก้าวสู่บทใหม่ของชีวิตได้อย่างมั่นใจ แต่ยังมีความลังเลสงสัยว่าเป็นนักเรียนเก็บเงินยังไง เรามี 8 ทริคเก็บเงินวัยเรียน พร้อมตัวช่วยในการออมเงินมาแนะนำ ตามไปดูกันเลย", + href: "/news/trick" + }, +]; export default function NewsPage() { return ( <> -
-

News

-
+

+ The +
+ Piggy Post +

-
- news_1 -
-

- บอกต่อ! 8 - ทริคเก็บเงินวัยเรียนให้มีเงินก้อนก่อนเรียนจบ -

-

- อยากมีเงินก้อนก่อนเรียนจบ ต้องทำยังไง สำหรับน้อง ๆ - ที่มีความคิดว่าก่อนเรียนจบอยากมีเงินเก็บสักก้อน - เพื่อใช้ในการเริ่มต้นสร้างเนื้อสร้างตัว - และก้าวสู่บทใหม่ของชีวิตได้อย่างมั่นใจ - แต่ยังมีความลังเลสงสัยว่าเป็นนักเรียนเก็บเงินยังไง - เรามี 8 ทริคเก็บเงินวัยเรียน - พร้อมตัวช่วยในการออมเงินมาแนะนำ ตามไปดูกันเลย -

-
-
+
); diff --git a/src/app/news/trick/page.tsx b/src/app/news/trick/page.tsx new file mode 100644 index 0000000..9e8b0e7 --- /dev/null +++ b/src/app/news/trick/page.tsx @@ -0,0 +1,44 @@ +export default function TrickPage() { + return ( +
+

+ 5 ทริคเก็บเงินวัยเรียนให้มีเงินก่อนเรียนจบ +

+

+ สำหรับน้อง ๆ ที่อยากมีเงินก้อนก่อนเรียนจบ + ไม่ว่าจะเพื่อเดินทางท่องเที่ยว หาประสบการณ์ + หรือเริ่มต้นชีวิตวัยทำงานอย่างมั่นใจ นี่คือ 5 + ทริคที่จะช่วยให้น้อง ๆ เก็บเงินได้ง่ายขึ้น + พร้อมกับเสริมสร้างวินัยในการออมเงิน: +
+
+ + 1{")"}. ตั้งเป้าหมายการออม: + {" "} + กำหนดจำนวนเงินที่ต้องการเก็บ และระยะเวลาที่ต้องการ +
+
+ 2{")"}. ทำงานพิเศษ: + หางานพาร์ทไทม์หรือทำงานเสริมเพื่อเพิ่มรายได้ +
+
+ + 3{")"}. บันทึกรายรับรายจ่าย: + {" "} + จดบันทึกรายรับรายจ่ายทุกวัน เพื่อรู้ว่ามีเงินเข้าหรือออกเท่าไหร่ +
+
+ + 4{")"}. ตัดค่าใช้จ่ายที่ไม่จำเป็น: + {" "} + ลดค่าใช้จ่ายที่ไม่จำเป็น เช่น การซื้อของฟุ่มเฟือย +
+
+ + 5{")"}. ออมเงินอย่างสม่ำเสมอ: + {" "} + นำเงินมาออมสม่ำเสมอกับเว็บไซต์ Piggy pocket +

+
+ ); +} diff --git a/src/app/page.tsx b/src/app/page.tsx index 5c5169d..a17ec66 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -34,8 +34,15 @@ export default function Home() { amount = +coins[_coinIdx]; } goal.progress += amount; - setGoal({ ...goal }); - localStorage.setItem("goal", JSON.stringify(goal)); + if (goal.progress >= goal.goal) { + alert("ยินดีด้วย! คุณทำตามเป้าหมายสำเร็จแล้ว ✨"); + setGoal(null); + localStorage.removeItem("goal"); + } else { + setGoal({ ...goal }); + localStorage.setItem("goal", JSON.stringify(goal)); + } + await new Promise((r) => setTimeout(r, 2000)); setCoinAnimate(""); setPigAnimate(""); diff --git a/src/app/skins/page.tsx b/src/app/skins/page.tsx index 3b94666..bc4d799 100644 --- a/src/app/skins/page.tsx +++ b/src/app/skins/page.tsx @@ -8,42 +8,92 @@ export default function SkinsPage() { const [skinIdx, setSkinIdx] = useState(0); return ( <> -
-

Dazzle Me!

-

pick my accessories

-
-
- - skin - +
+
+
+

Dazzle Me!

+

pick my accessories

+
+
+ + skin + +
+
+
+
+
+ {skins[skinIdx] === "1" && ( + skin + )} + {skins[skinIdx] === "2" && ( + skin + )} + {skins[skinIdx] === "3" && ( + skin + )} + {skins[skinIdx] === "4" && ( + skin + )} + {skins[skinIdx] === "5" && ( + skin + )} + pigky +
+
+
);