Exsors
16ea71b011
- 5 halaman: Beranda, Tentang, Hobi, Gallery, Kontak (TSX route segments) - Navigasi bersama (components/Nav.tsx) - About: internal CSS (about/head.tsx) - Hobi: external CSS (hobbies/styles.css), 3 foto pribadi - Gallery: Tailwind CDN, 3 foto pribadi - Kontak: tanpa form, link sosial media + email - Semua file di root, tidak ada file Next.js tambahan
30 lines
979 B
TypeScript
30 lines
979 B
TypeScript
import Link from "next/link";
|
|
|
|
const pages = [
|
|
{ href: "/Hulio", label: "Beranda" },
|
|
{ href: "/Hulio/about", label: "Tentang" },
|
|
{ href: "/Hulio/hobbies", label: "Hobi" },
|
|
{ href: "/Hulio/gallery", label: "Foto" },
|
|
{ href: "/Hulio/contact", label: "Kontak" },
|
|
] as const;
|
|
|
|
export default function Nav() {
|
|
return (
|
|
<nav aria-label="Navigasi utama" style={{ padding: "16px 0", borderBottom: "1px solid #e5e7eb" }}>
|
|
{/* Navbar yang sama muncul di setiap halaman, taut ke semua 5 halaman situs. */}
|
|
<ul style={{ display: "flex", gap: "20px", listStyle: "none", padding: 0, margin: 0, justifyContent: "center" }}>
|
|
{pages.map((p) => (
|
|
<li key={p.href} style={{ margin: 0 }}>
|
|
<Link
|
|
href={p.href}
|
|
style={{ textDecoration: "none", color: "#374151", fontWeight: 500, fontSize: "15px" }}
|
|
>
|
|
{p.label}
|
|
</Link>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</nav>
|
|
);
|
|
}
|