Merge pull request #11 from WebmasterCamp/dev

v1.1.0

Author: KanonKC

src/app/login/page.tsx

@@ -0,0 +1,61 @@
+'use client';
+import { useState } from 'react';
+import { useRouter } from 'next/navigation';
+
+export default function LoginPage() {
+  const router = useRouter();
+
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState('');
+  const [success, setSuccess] = useState(false);
+
+  const isValidEmail = (email: string) =>
+    /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/u.test(email);
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!isValidEmail(email)) return setError('อีเมลไม่ถูกต้อง');
+    if (!password) return setError('กรุณากรอกรหัสผ่าน');
+    setError('');
+    setSuccess(true);
+
+    // หลังจาก login สำเร็จ redirect ไปหน้า /home
+    router.push('/');
+  };
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gradient-to-r from-black to-red-900 p-4">
+      <form onSubmit={handleSubmit} className="bg-black/80 p-10 rounded-2xl w-full max-w-md text-white">
+        <h1 className="flex text-[20px] font-semibold mb-2 items-center justify-center">
+          <img src="/logo.png" alt="" className='w-[37px] h-[37px]'/>
+          หาผีใกล้ฉัน</h1>
+          <div  className='text-center'>เข้าสู่ระบบ </div>
+
+        <label className="block mb-4">
+          <span>อีเมล</span>
+          <input
+            type="text"
+            className="w-full mt-1 p-2 rounded-full text-white"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+          />
+        </label>
+        <label className="block mb-4">
+          <span>รหัสผ่าน</span>
+          <input
+            type="password"
+            className="w-full mt-1 p-2 rounded-full text-white"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+          />
+        </label>
+        {error && <div className="text-red-400 mb-2">{error}</div>}
+        {success && <div className="text-green-400 mb-2 ">เข้าสู่ระบบสำเร็จ!</div>}
+        <button type="submit" className="mt-2 bg-red-800 w-full py-2 rounded hover:bg-red-700">
+          เข้าสู่ระบบ
+        </button>
+      </form>
+    </div>
+  );
+}

src/app/login/success/page.tsx

@@ -0,0 +1,27 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+
+export default function LoginSuccess() {
+  const router = useRouter();
+
+  const handleLogout = () => {
+    // ในอนาคตจะใส่ logic logout ที่นี่
+    router.push('/'); // กลับไปหน้า login
+  };
+
+  return (
+    <div className="min-h-screen flex flex-col items-center justify-center bg-gradient-to-r from-black to-red-900 p-4 text-white">
+      <h1 className="text-4xl font-bold mb-6">ยินดีต้อนรับสู่หน้า Home 👻</h1>
+      <p className="mb-10 text-center max-w-md">
+        คุณเข้าสู่ระบบสำเร็จแล้ว! ตอนนี้คุณสามารถใช้งานเว็บไซต์หาผีใกล้ฉันได้ตามต้องการ
+      </p>
+      <button
+        onClick={handleLogout}
+        className="bg-red-800 px-6 py-3 rounded hover:bg-red-700 transition"
+      >
+        ออกจากระบบ
+      </button>
+    </div>
+  );
+}

src/app/my/page.css

@@ -0,0 +1,25 @@
+.main-container {
+    min-height: calc(100vh - 100px);
+    background-image: url('/bg.jpg');
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+    position: relative;
+    padding-bottom: 100px;
+}
+
+.main-container::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.5);
+    z-index: 1;
+}
+
+.main-content {
+    position: relative;
+    z-index: 2;
+}

src/app/my/page.tsx

@@ -0,0 +1,54 @@
+import GhostNearMeSearchCard from "@/components/GhostNearMeSearchCard/GhostNearMeSearchCard";
+import NavigationBar from "@/components/NavigationBar";
+import React from "react";
+import './page.css';
+import GradientCard from "@/components/GradientCard/GradientCard";
+import CreateGhostStory from "@/components/CreateGhostStory/CreateGhostStory";
+const My = () => {
+  return (
+    <div className="main-container">
+      <div className="main-content">
+        <NavigationBar />
+        <div className="text-center mt-[100px]">
+          <div className="text-[40px] text-white">
+            แชร์เรื่องเล่า
+          </div>
+        </div>
+        <div className="w-[80%] mx-auto">
+          <div className="mt-[20px] mb-[80px]">
+            <CreateGhostStory />
+          </div>
+          <div>
+            <div className="flex justify-between items-end mb-[40px]">
+              <div className="text-[32px] font-bold text-white">
+                เรื่องเล่าจากทางบ้าน
+              </div>
+              <div className="text-[20px] text-white">ดูทั้งหมด</div>
+            </div>
+
+            <div className="grid grid-cols-2 gap-[32px]">
+              <GradientCard
+                title="เรื่องเล่าจากทางบ้าน"
+                description="เรื่องเล่าจากทางบ้าน"
+              />
+              <GradientCard
+                title="เรื่องเล่าจากทางบ้าน"
+                description="เรื่องเล่าจากทางบ้าน"
+              />
+              <GradientCard
+                title="เรื่องเล่าจากทางบ้าน"
+                description="เรื่องเล่าจากทางบ้าน"
+              />
+              <GradientCard
+                title="เรื่องเล่าจากทางบ้าน"
+                description="เรื่องเล่าจากทางบ้าน"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default My;

src/app/page.tsx

@@ -1,10 +1,42 @@
+'use client'
 import NavigationBar from "@/components/NavigationBar";
 import Image from "next/image";
 import GhostNearMeSearchCard from "@/components/GhostNearMeSearchCard/GhostNearMeSearchCard";
 import GradientCard from "@/components/GradientCard/GradientCard";
 import './page.css'
+import { useState } from "react";
 
 export default function Home() {
+  const [searchQuery, setSearchQuery] = useState("")
+
+  const handleSearch = (query: string) => {
+    setTimeout(() => {
+      setSearchQuery(query)
+    }, 1000);
+  }
+
+  const mockData = [
+    {
+      title: "เสียงลึกลับในบ้านร้าง",
+      description: "แค่เล่นหยอกกับเพื่อนว่าจะไปล่าท้าผีทว่ากลับเจอเรื่องสุดสยองในบ้านร้าง..."
+    },
+    {
+      title: "เงาปริศนาใต้สะพาน",
+      description: "ทุกคืนวันพระจะมีเสียงร้องไห้ดังมาจากใต้สะพานเก่า ไม่มีใครกล้าเข้าใกล้จนกระทั่งวันหนึ่งมีเด็กกลุ่มหนึ่งหายตัวไป..."
+    },
+    {
+      title: "เสียงกระซิบในห้องเรียนร้าง",
+      description: "นักเรียนที่อยู่เวรดึกมักได้ยินเสียงกระซิบชื่อของตัวเองจากห้องเรียนที่ปิดตายมานานหลายปี..."
+    },
+    {
+      title: "ตุ๊กตาผีในบ้านเช่า",
+      description: "หลังจากย้ายเข้าบ้านเช่าใหม่ เด็กหญิงคนหนึ่งเริ่มพูดคุยกับตุ๊กตาตัวเก่าที่พบในห้องเก็บของ ก่อนจะเกิดเหตุการณ์ประหลาดขึ้นทุกคืน..."
+    },
+    {
+      title: "เงาลึกลับริมถนนพหลโยธิน",
+      description: "คืนหนึ่งขณะขับรถกลับบ้านบนถนนพหลโยธิน ฉันเห็นเงาดำสูงใหญ่ยืนอยู่ข้างทาง แม้จะขับผ่านไปแล้วแต่กระจกหลังก็ยังสะท้อนภาพเงานั้นที่เหมือนจะขยับเข้ามาใกล้ขึ้นเรื่อย ๆ... จนต้องเร่งเครื่องหนีโดยไม่กล้าหันกลับไปมองอีกเลย"
+    },
+  ]
   return (
     <div className="main-container">
       <div className="main-content">
@@ -15,19 +47,26 @@ export default function Home() {
         </div>
         <div className="w-[80%] mx-auto">
           <div className="my-[80px]">
-            <GhostNearMeSearchCard />
+            <GhostNearMeSearchCard onSearch={handleSearch} />
           </div>
           <div>
             <div className="flex justify-between items-end mb-[40px]">
-              <div className="text-[32px] font-bold text-white">เรื่องเล่าจากทางบ้าน</div>
+              <div className={`text-[32px] font-bold ${searchQuery ? "text-red-500" : "text-white"}`}>
+                
+                {searchQuery ? `${searchQuery}` : "เรื่องเล่าจากทางบ้าน"} 
+                {searchQuery && (<span className="text-white">ใกล้ฉัน</span>)}</div>
               <div className="text-[20px] text-white">ดูทั้งหมด</div>
             </div>
 
             <div className="grid grid-cols-2 gap-[32px]">
-              <GradientCard title="เรื่องเล่าจากทางบ้าน" description="เรื่องเล่าจากทางบ้าน" />
-              <GradientCard title="เรื่องเล่าจากทางบ้าน" description="เรื่องเล่าจากทางบ้าน" />
-              <GradientCard title="เรื่องเล่าจากทางบ้าน" description="เรื่องเล่าจากทางบ้าน" />
-              <GradientCard title="เรื่องเล่าจากทางบ้าน" description="เรื่องเล่าจากทางบ้าน" />
+              {mockData.filter((item) => {
+                if (searchQuery === "บางเขน") {
+                  return item.title.toLowerCase().includes("พหลโยธิน")
+                }
+                return item.title.toLowerCase().includes(searchQuery.toLowerCase())
+              }).map((item) => (
+                <GradientCard title={item.title} description={item.description} key={item.title} />
+              ))}
             </div>
           </div>
         </div>