Mission 6: Workshop — Navbar

เป้าหมายของ Mission นี้: สร้าง Navbar component ที่มีลิงก์ไปหน้า Home / About / Contact

flowchart LR
    N["Navbar"] --> H["Home (/)"]
    N --> AB["About (/about)"]
    N --> CT["Contact (/contact)"]

สิ่งที่ต้องทำ

1. สร้างไฟล์ components/Navbar.tsx
2. ใส่ลิงก์ 3 อัน: Home (/), About (/about), Contact (/contact) ด้วย <Link>
3. เอาไปวางใน app/layout.tsx ให้ขึ้นทุกหน้า

จุดเริ่มต้น (ลองเติมเอง)

// components/Navbar.tsx
import Link from "next/link";

export function Navbar() {
  return (
    <nav className="flex items-center justify-between p-4">
      <span className="font-bold">โลโก้บริษัท</span>
      <div className="flex gap-4">
        {/* TODO: เพิ่ม Link ไปหน้า Home, About, Contact */}
      </div>
    </nav>
  );
}

ลองทำเองก่อน ถ้าติดตรงไหนถามผู้สอนได้เลย