Tugas Personal Website

2026-11-06 21:21:29 +07:00
commit bbcd07213c
26 changed files with 1877 additions and 0 deletions
@@ -0,0 +1,80 @@
+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>
+  );
+}