this repo has no description
1"use client";
2
3import { Link, useRouterState } from "@tanstack/react-router";
4import { StatusDot } from "~/chapters/status-dot";
5
6interface NavItemProps {
7 to: string;
8 label: string;
9 preload?: "intent" | false;
10 search?: Record<string, unknown>;
11}
12
13export function NavItem({ to, label, preload, search }: NavItemProps) {
14 const state = useRouterState();
15 const currentPath = state.location.pathname;
16 const isActive = currentPath === to;
17 const isLoading = state.isLoading && isActive;
18
19 const showStatus = to !== "/";
20 const status = isLoading ? "fetching" : isActive ? "cached" : "idle";
21
22 return (
23 <Link
24 to={to}
25 search={search}
26 preload={preload}
27 className={`nav-link ${isActive ? "nav-link-active" : ""}`}
28 aria-current={isActive ? "page" : undefined}
29 >
30 {showStatus && <StatusDot status={status} />}
31 <span>{label}</span>
32 {showStatus && (
33 <span className="sr-only">
34 {status === "fetching" && "— loading"}
35 {status === "cached" && "— cached"}
36 {status === "idle" && "— idle"}
37 </span>
38 )}
39 </Link>
40 );
41}