1⚡ 0 XP

เข้าสู่ระบบ

กำลังโหลด...

Chapter 1: ทบทวน + Workshop

Mission 7: Workshop — Footer

ปฏิบัติ✦ 15 xp

✉️คำขอจากลูกค้า — พี่เจน — Team Lead

ต่อด้วย Footer

Navbar เสร็จแล้ว ทีนี้ทำ Footer เล็กๆ ท้ายเว็บให้หน่อย ใส่ปีลิขสิทธิ์ก็พอ

📖บทเรียน

เป้าหมายของ Mission นี้: สร้าง Footer component เล็กๆ ท้ายเว็บ

flowchart TD
    RL["app/layout.tsx"] --> NV["Navbar"]
    RL --> CH["children (เนื้อหาแต่ละหน้า)"]
    RL --> FT["Footer"]

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

สร้างไฟล์ components/Footer.tsx
ใส่ข้อความลิขสิทธิ์สั้นๆ
เอาไปวางใน app/layout.tsx ต่อจาก {children} ให้ขึ้นทุกหน้า

Demo

// components/Footer.tsx
export function Footer() {
  return (
    <footer className="p-4 text-center text-sm text-neutral-500">
      © 2569 บริษัทของฉัน
    </footer>
  );
}

// app/layout.tsx
import { Navbar } from "@/components/Navbar";
import { Footer } from "@/components/Footer";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="th">
      <body>
        <Navbar />
        {children}
        <Footer />
      </body>
    </html>
  );
}