81 lines
2.7 KiB
TypeScript
81 lines
2.7 KiB
TypeScript
import type { CSSProperties } from "react";
|
|
import { links } from "../lib/data";
|
|
|
|
type NavProps = { current: string };
|
|
|
|
// catatan: memakai <a> biasa (bukan next/link) agar setiap halaman dimuat penuh
|
|
// seperti situs multipage html, sehingga css tiap halaman tidak saling bocor
|
|
|
|
// nav versi 1: inline css (dipakai index)
|
|
const inlineNav: Record<string, CSSProperties> = {
|
|
list: { display: "flex", flexWrap: "wrap", gap: "8px", listStyle: "none", margin: 0, padding: 0 },
|
|
link: { display: "inline-block", padding: "8px 16px", borderRadius: "999px", textDecoration: "none", fontWeight: 600, color: "#0f4c5c", background: "#e3eef0" },
|
|
active: { display: "inline-block", padding: "8px 16px", borderRadius: "999px", textDecoration: "none", fontWeight: 600, color: "#ffffff", background: "#0f4c5c" },
|
|
};
|
|
|
|
export function NavInline({ current }: NavProps) {
|
|
return (
|
|
<nav aria-label="Navigasi utama" style={{ padding: "16px 0" }}>
|
|
<ul style={inlineNav.list}>
|
|
{links.map((item) => (
|
|
<li key={item.href}>
|
|
<a
|
|
href={item.href}
|
|
style={current === item.href ? inlineNav.active : inlineNav.link}
|
|
aria-current={current === item.href ? "page" : undefined}
|
|
>
|
|
{item.label}
|
|
</a>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</nav>
|
|
);
|
|
}
|
|
|
|
// nav versi 2: external css (about, hobbies, contact) - kelas ada di public/styles.css
|
|
export function NavExternal({ current }: NavProps) {
|
|
return (
|
|
<nav className="site-nav" aria-label="Navigasi utama">
|
|
<ul>
|
|
{links.map((item) => (
|
|
<li key={item.href}>
|
|
<a
|
|
href={item.href}
|
|
className={current === item.href ? "active" : undefined}
|
|
aria-current={current === item.href ? "page" : undefined}
|
|
>
|
|
{item.label}
|
|
</a>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</nav>
|
|
);
|
|
}
|
|
|
|
// nav versi 3: tailwind css (gallery)
|
|
export function NavTailwind({ current }: NavProps) {
|
|
return (
|
|
<nav aria-label="Navigasi utama" className="py-4">
|
|
<ul className="flex flex-wrap gap-2 list-none m-0 p-0">
|
|
{links.map((item) => (
|
|
<li key={item.href}>
|
|
<a
|
|
href={item.href}
|
|
aria-current={current === item.href ? "page" : undefined}
|
|
className={
|
|
current === item.href
|
|
? "inline-block rounded-full bg-teal-800 px-4 py-2 font-semibold text-white no-underline"
|
|
: "inline-block rounded-full bg-teal-50 px-4 py-2 font-semibold text-teal-800 no-underline hover:bg-teal-100"
|
|
}
|
|
>
|
|
{item.label}
|
|
</a>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</nav>
|
|
);
|
|
}
|