Featured Project

วิธีใช้

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

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

2. Import มาใช้

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

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

   Copy

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

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

   <FeaturedProject
     title="My Portfolio"
     description="My first Next.js website."
     image="/portfolio.png"
     demoUrl="https://my-portfolio.vercel.app"
     codeUrl="https://github.com/your-username/my-portfolio"
   />

   Copy

Props

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

Dependencies

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