"use client";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { useEffect } from "react";
import { ChevronLeft, ChevronRight, Shuffle, Undo2 } from "lucide-react";
import { cn, coverHref } from "@/lib/utils";
type Neighbor = { id: number; code: string | null } | null;
export function ImageNav({
prev,
next,
randomEndpoint,
}: {
prev: Neighbor;
next: Neighbor;
randomEndpoint: string;
}) {
const router = useRouter();
const prevHref = prev ? coverHref(prev) : null;
const nextHref = next ? coverHref(next) : null;
useEffect(() => {
const onKey = (e: KeyboardEvent) => {
const t = e.target as HTMLElement | null;
if (t && (t.tagName === "INPUT" || t.tagName === "TEXTAREA" || t.isContentEditable)) return;
if (e.metaKey || e.ctrlKey || e.altKey) return;
if (e.key === "ArrowLeft") {
if (prevHref) { e.preventDefault(); router.push(prevHref); }
} else if (e.key === "ArrowRight") {
if (nextHref) { e.preventDefault(); router.push(nextHref); }
} else if (e.key === "ArrowUp") {
e.preventDefault();
router.push(randomEndpoint);
} else if (e.key === "ArrowDown") {
e.preventDefault();
router.back();
}
};
window.addEventListener("keydown", onKey);
return () => window.removeEventListener("keydown", onKey);
}, [prevHref, nextHref, randomEndpoint, router]);
return (
);
}
function NavBtn({ href, label, children }: { href: string | null; label: string; children: React.ReactNode }) {
const className = cn(
"w-8 h-8 grid place-items-center rounded-lg border transition-colors",
href
? "border-[var(--color-glass-border)] text-[var(--color-fg-dim)] hover:text-[var(--color-fg)] hover:bg-[var(--color-glass)]"
: "border-[var(--color-glass-border)]/40 text-[var(--color-fg-muted)]/40 cursor-not-allowed",
);
if (!href) {
return (
{children}
);
}
return (
{children}
);
}