Modern Navbar

วิธีใช้

1. สร้างไฟล์แล้ววางโค้ด

   ใน Portfolio Starter สร้างไฟล์ components/NavbarModern.tsx กด Copy code ด้านบน แล้ววางทั้งหมด

2. Import มาใช้

   เปิด app/page.tsx เพิ่มบรรทัด import ไว้บนสุด แล้ววาง component ใน return

   import NavbarModern from "@/components/NavbarModern";
   
   export default function Home() {
     return (
       <main>
         <NavbarModern />
       </main>
     );
   }

   Copy

3. ใส่ข้อมูลของคุณผ่าน props

   ไม่ใส่ props ก็แสดงข้อมูลตัวอย่างได้ พอพร้อมแล้วส่งข้อมูลของคุณเข้าไปแบบนี้

   <NavbarModern name="Mint" ctaLabel="Say hi" ctaHref="mailto:mint@example.com" accent="#16a34a" />

   Copy

Props

ทุก prop ไม่บังคับ (มี ? ในโค้ด) ถ้าไม่ใส่จะใช้ค่าตัวอย่างในวงเล็บ = … ของ function

Dependencies

ไม่ต้องติดตั้งอะไรเพิ่ม ใช้ได้กับ Portfolio Starter ทันที (Next.js + React + Tailwind CSS)