Project Grid

วิธีใช้

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

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

2. Import มาใช้

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

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

   Copy

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

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

   <ProjectGrid
     projects={[
       { title: "My Portfolio", description: "This website.", tags: ["Web"], href: "https://github.com/..." },
       { title: "Club Poster", description: "Poster for art club.", tags: ["Design"], href: "#", image: "/poster.jpg" },
     ]}
   />

   Copy

Props

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

Dependencies

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