Navbar Index

"use client";

import { useEffect, useId, useState } from "react";
import { cn } from "@/lib/utils";

export interface NavbarIndexProps {
  brand?: string;
  brandHref?: string;
  links?: { label: string; href: string }[];
  city?: string;
  timeZone?: string;
  cta?: { label: string; href: string };
  className?: string;
}

function FrameMark({ className }: { className?: string }) {
  return (
    <svg aria-hidden viewBox="0 0 24 24" className={cn("size-6 shrink-0", className)}>
      <rect x="1" y="1" width="22" height="22" fill="none" stroke="currentColor" strokeWidth="2" />
      <path d="M7 1v22M1 7h22" stroke="currentColor" strokeWidth="2" />
      <rect x="15" y="15" width="4" height="4" fill="var(--da-accent)" />
    </svg>
  );
}

/** Studio-style index navbar: numbered links “(01) Work”, a live local clock with city in mono, availability dot in the signal color and an underlined text CTA; stacked list on mobile. */
export function NavbarIndex({
  brand = "Frame",
  brandHref = "/",
  links = [
    { label: "Work", href: "#work" },
    { label: "Templates", href: "#templates" },
    { label: "Journal", href: "#journal" },
    { label: "About", href: "#about" },
  ],
  city = "Amsterdam",
  timeZone = "Europe/Amsterdam",
  cta = { label: "Get in touch", href: "#contact" },
  className,
}: NavbarIndexProps) {
  const [open, setOpen] = useState(false);
  const id = useId();
  useEffect(() => {
    if (!open) return;
    const onKey = (e: KeyboardEvent) => e.key === "Escape" && setOpen(false);
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [open]);
  const [time, setTime] = useState("");
  useEffect(() => {
    const tick = () => setTime(new Intl.DateTimeFormat("en-GB", { hour: "2-digit", minute: "2-digit", timeZone }).format(new Date()));
    tick();
    const t = setInterval(tick, 30_000);
    return () => clearInterval(t);
  }, [timeZone]);
  return (
    <header className={cn("bg-da-bg text-da-fg", className)}>
      <nav aria-label="Main" className="da-container grid grid-cols-[auto_1fr_auto] items-center gap-6 py-5 lg:grid-cols-12">
        <a
          href={brandHref}
          className="da-focus flex items-center gap-2.5 rounded-da-sm font-da-display text-lg font-semibold tracking-da-display lg:col-span-3"
        >
          <FrameMark />
          {brand}
        </a>
        <ul className="hidden gap-6 lg:col-span-5 lg:flex">
          {links.map((l, i) => (
            <li key={l.href}>
              <a href={l.href} className="da-focus flex items-baseline gap-1.5 rounded-da-sm text-[15px] hover:text-da-muted-fg">
                <span className="font-da-mono text-[11px] text-da-muted-fg">({String(i + 1).padStart(2, "0")})</span>
                {l.label}
              </a>
            </li>
          ))}
        </ul>
        <p className="hidden items-center gap-2 font-da-mono text-xs tracking-da-label text-da-muted-fg uppercase lg:col-span-2 lg:flex">
          <span aria-hidden className="size-1.5 rounded-full bg-da-accent" />
          {city} <time suppressHydrationWarning>{time}</time>
        </p>
        <a
          href={cta.href}
          className="da-focus hidden justify-self-end rounded-da-sm text-[15px] underline decoration-da-accent decoration-2 underline-offset-[6px] hover:decoration-da-fg lg:col-span-2 lg:block"
        >
          {cta.label} ↗
        </a>
        <button
          type="button"
          aria-expanded={open}
          aria-controls={id}
          onClick={() => setOpen(!open)}
          className="da-focus col-start-3 rounded-da-sm font-da-mono text-xs tracking-da-label uppercase lg:hidden"
        >
          {open ? "Close" : "Index"}
        </button>
      </nav>
      <div id={id} hidden={!open} className="da-container pb-6 lg:hidden">
        <ul className="border-t border-da-border-strong">
          {links.map((l, i) => (
            <li key={l.href} className="border-b border-da-border">
              <a href={l.href} className="da-focus flex items-baseline justify-between rounded-da-sm py-4 font-da-display text-3xl tracking-da-display">
                {l.label}
                <span className="font-da-mono text-xs text-da-muted-fg">({String(i + 1).padStart(2, "0")})</span>
              </a>
            </li>
          ))}
        </ul>
        <a href={cta.href} className="da-focus mt-5 inline-block rounded-da-sm underline decoration-da-accent decoration-2 underline-offset-[6px]">
          {cta.label} ↗
        </a>
      </div>
    </header>
  );
}

export default NavbarIndex;