/Projects
Component Shop
CS ChallengeComponent ShopFooterSimple Footer

Simple Footer

FooterEasy

ชื่อ ปีปัจจุบัน และลิงก์โซเชียล

วิธีใช้

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

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

  2. Import มาใช้

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

    import SimpleFooter from "@/components/SimpleFooter";
    
    export default function Home() {
      return (
        <main>
          <SimpleFooter />
        </main>
      );
    }
  3. ใส่ข้อมูลของคุณผ่าน props

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

    <SimpleFooter
      name="Mint"
      links={[{ label: "GitHub", href: "https://github.com/your-username" }]}
    />

Props

PropTypeใช้ทำอะไร
namestringชื่อหลัง ©
links{ label: string; href: string }[]ลิงก์โซเชียล

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

Dependencies

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