feat: finish again

WebmasterCamp · Jul 21, 2024 · d1aa9fa · d1aa9fa
1 parent 6dd4d42
commit d1aa9fa
Show file tree

Hide file tree

Showing 11 changed files with 185 additions and 64 deletions.
diff --git a/PiggyPocket.pdf b/PiggyPocket.pdf
diff --git a/public/next.svg b/public/next.svg
diff --git a/public/vercel.svg b/public/vercel.svg
diff --git 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" })}
                 </h1>
             </div>
-            <div className="p-6 bg-white">
+            <div className="p-6 bg-white shadow-lg">
                 <div className="grid grid-cols-7 gap-3 text-center text-xs">
                     <p>Sun</p>
                     <p>Mon</p>

diff --git a/src/app/favicon.ico b/src/app/favicon.ico
diff --git 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({
                 />
             </head>
             <body>
-                <div className="flex justify-center items-center h-screen bg-white p-0 sm:p-6">
-                    <div className="relative w-[450px] h-full rounded-none sm:rounded-xl bg-gradient-to-t from-[#1472FF] to-[#92E5FF] shadow-none sm:shadow-lg px-6 overflow-hidden">
+                <div className="flex justify-center items-center sm:h-screen bg-white p-0 sm:p-6">
+                    <div className="relative w-[450px] h-[100dvh] sm:h-full rounded-none sm:rounded-xl bg-gradient-to-t from-[#1472FF] to-[#92E5FF] shadow-none sm:shadow-lg px-6 overflow-hidden">
                         <Navbar />
                         <div className="absolute bottom-[-176px] left-1/2 -translate-x-1/2 min-w-[120vw] min-h-[120vw] sm:min-w-[500px] sm:min-h-[500px] rounded-full bg-white"></div>
                         <div className="relative h-full">{children}</div>

diff --git a/src/app/news/news.tsx 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 (
+        <div className="bg-white rounded-xl overflow-hidden shadow-lg">
+            <img src={image} alt="news_1" />
+            <div className="p-4">
+                <h1 className="font-semibold">
+                    {title}
+                </h1>
+                <p className="truncate text-sm text-black/60 mb-4">
+                    {description}
+                </p>
+                <Link
+                    href={href}
+                    className="bg-blue-100 text-blue-500 text-sm px-4 py-1 rounded-lg transition active:scale-95"
+                >
+                    <i className="far fa-chevron-right"></i> อ่านเพิ่มเติม
+                </Link>
+            </div>
+        </div>
+    );
+}
diff --git 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 (
         <>
-            <div className="text-center pt-20 mb-8">
-                <h1 className="text-3xl font-semibold text-white">News</h1>
-            </div>
+            <h1 className="text-center pt-32 mb-16 text-5xl font-bold text-white">
+                The
+                <br />
+                Piggy Post
+            </h1>
 
             <div className="space-y-4">
-                <div className="bg-white rounded-xl overflow-hidden shadow-lg">
-                    <img src="/images/news_1.png" alt="news_1" />
-                    <div className="p-4">
-                        <h1 className="font-semibold">
-                            บอกต่อ! 8
-                            ทริคเก็บเงินวัยเรียนให้มีเงินก้อนก่อนเรียนจบ
-                        </h1>
-                        <p className="truncate text-sm text-black/60">
-                            อยากมีเงินก้อนก่อนเรียนจบ ต้องทำยังไง สำหรับน้อง ๆ
-                            ที่มีความคิดว่าก่อนเรียนจบอยากมีเงินเก็บสักก้อน
-                            เพื่อใช้ในการเริ่มต้นสร้างเนื้อสร้างตัว
-                            และก้าวสู่บทใหม่ของชีวิตได้อย่างมั่นใจ
-                            แต่ยังมีความลังเลสงสัยว่าเป็นนักเรียนเก็บเงินยังไง
-                            เรามี 8 ทริคเก็บเงินวัยเรียน
-                            พร้อมตัวช่วยในการออมเงินมาแนะนำ ตามไปดูกันเลย
-                        </p>
-                    </div>
-                </div>
+                <News {...news[0]} />
             </div>
         </>
     );

diff --git a/src/app/news/trick/page.tsx b/src/app/news/trick/page.tsx
@@ -0,0 +1,44 @@
+export default function TrickPage() {
+    return (
+        <div className="text-white">
+            <h1 className="pt-32 text-4xl font-semibold mb-8">
+                5 ทริคเก็บเงินวัยเรียนให้มีเงินก่อนเรียนจบ
+            </h1>
+            <p className="text-black">
+                สำหรับน้อง ๆ ที่อยากมีเงินก้อนก่อนเรียนจบ
+                ไม่ว่าจะเพื่อเดินทางท่องเที่ยว หาประสบการณ์
+                หรือเริ่มต้นชีวิตวัยทำงานอย่างมั่นใจ นี่คือ 5
+                ทริคที่จะช่วยให้น้อง ๆ เก็บเงินได้ง่ายขึ้น
+                พร้อมกับเสริมสร้างวินัยในการออมเงิน:
+                <br />
+                <br />
+                <span className="font-semibold">
+                    1{")"}. ตั้งเป้าหมายการออม:
+                </span>{" "}
+                กำหนดจำนวนเงินที่ต้องการเก็บ และระยะเวลาที่ต้องการ
+                <br />
+                <br />
+                <span className="font-semibold">2{")"}. ทำงานพิเศษ:</span>
+                หางานพาร์ทไทม์หรือทำงานเสริมเพื่อเพิ่มรายได้
+                <br />
+                <br />
+                <span className="font-semibold">
+                    3{")"}. บันทึกรายรับรายจ่าย:
+                </span>{" "}
+                จดบันทึกรายรับรายจ่ายทุกวัน เพื่อรู้ว่ามีเงินเข้าหรือออกเท่าไหร่
+                <br />
+                <br />
+                <span className="font-semibold">
+                    4{")"}. ตัดค่าใช้จ่ายที่ไม่จำเป็น:
+                </span>{" "}
+                ลดค่าใช้จ่ายที่ไม่จำเป็น เช่น การซื้อของฟุ่มเฟือย
+                <br />
+                <br />
+                <span className="font-semibold">
+                    5{")"}. ออมเงินอย่างสม่ำเสมอ:
+                </span>{" "}
+                นำเงินมาออมสม่ำเสมอกับเว็บไซต์ Piggy pocket
+            </p>
+        </div>
+    );
+}
diff --git 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
@@ -8,42 +8,92 @@ export default function SkinsPage() {
     const [skinIdx, setSkinIdx] = useState(0);
     return (
         <>
-            <div className="text-center pt-36 mb-8 text-white">
-                <h1 className="text-5xl font-bold">Dazzle Me!</h1>
-                <p className="text-xl">pick my accessories</p>
-            </div>
-            <div className="flex justify-center items-center gap-8">
-                <button
-                    type="button"
-                    className="text-white text-5xl"
-                    onClick={(e) => {
-                        e.preventDefault();
-                        if (skinIdx === 0) {
-                            return setSkinIdx(skins.length - 1);
-                        }
-                        setSkinIdx(skinIdx - 1);
-                    }}
-                >
-                    <i className="fas fa-caret-left"></i>
-                </button>
-                <img
-                    className={`max-h-[100px] max-w-[100px] object-cover`}
-                    src={`/images/skin_${skins[skinIdx]}.png`}
-                    alt="skin"
-                />
-                <button
-                    type="button"
-                    className="text-white text-5xl"
-                    onClick={(e) => {
-                        e.preventDefault();
-                        if (skinIdx >= skins.length - 1) {
-                            return setSkinIdx(0);
-                        }
-                        setSkinIdx(skinIdx + 1);
-                    }}
-                >
-                    <i className="fas fa-caret-right"></i>
-                </button>
+            <div className="h-full flex flex-col pt-36 pb-32 justify-between">
+                <div>
+                    <div className="text-center mb-8 text-white">
+                        <h1 className="text-5xl font-bold">Dazzle Me!</h1>
+                        <p className="text-xl">pick my accessories</p>
+                    </div>
+                    <div className="h-[100px] w-[300px] mx-auto flex justify-between items-center gap-8">
+                        <button
+                            type="button"
+                            className="text-white text-5xl"
+                            onClick={(e) => {
+                                e.preventDefault();
+                                if (skinIdx === 0) {
+                                    return setSkinIdx(skins.length - 1);
+                                }
+                                setSkinIdx(skinIdx - 1);
+                            }}
+                        >
+                            <i className="fas fa-caret-left"></i>
+                        </button>
+                        <img
+                            className={`max-h-[100px] max-w-[100px] object-cover`}
+                            src={`/images/skin_${skins[skinIdx]}.png`}
+                            alt="skin"
+                        />
+                        <button
+                            type="button"
+                            className="text-white text-5xl"
+                            onClick={(e) => {
+                                e.preventDefault();
+                                if (skinIdx >= skins.length - 1) {
+                                    return setSkinIdx(0);
+                                }
+                                setSkinIdx(skinIdx + 1);
+                            }}
+                        >
+                            <i className="fas fa-caret-right"></i>
+                        </button>
+                    </div>
+                </div>
+                <div>
+                    <div className="flex justify-center">
+                        <div className="relative">
+                            {skins[skinIdx] === "1" && (
+                                <img
+                                    className="absolute top-1/2 left-1/2 -translate-y-[10px] -translate-x-1/2 w-[100px]"
+                                    src="/images/skin_1.png"
+                                    alt="skin"
+                                />
+                            )}
+                            {skins[skinIdx] === "2" && (
+                                <img
+                                    className="absolute top-1/2 left-1/2 -translate-y-[20px] -translate-x-1/2 w-[100px]"
+                                    src="/images/skin_2.png"
+                                    alt="skin"
+                                />
+                            )}
+                            {skins[skinIdx] === "3" && (
+                                <img
+                                    className="absolute top-1/2 left-1/2 -translate-y-[130px] -translate-x-[90px] -rotate-12 w-[100px]"
+                                    src="/images/skin_3.png"
+                                    alt="skin"
+                                />
+                            )}
+                            {skins[skinIdx] === "4" && (
+                                <img
+                                    className="absolute top-1/2 left-1/2 -translate-y-[200px] -translate-x-1/2 w-[100px]"
+                                    src="/images/skin_4.png"
+                                    alt="skin"
+                                />
+                            )}
+                            {skins[skinIdx] === "5" && (
+                                <img
+                                    className="absolute top-1/2 left-1/2 translate-y-[60px] -translate-x-1/2 h-[100px]"
+                                    src="/images/skin_5.png"
+                                    alt="skin"
+                                />
+                            )}
+                            <img
+                                className="w-[250px]"
+                                src="/images/pigky.png"
+                                alt="pigky"
+                            />
+                        </div>
+                    </div>
+                </div>
             </div>
         </>
     );