* Nav links, optionally highlighted for the active route. `usePathname` is * runtime data under Cache Components (unknown during the prerender of * dynamic routes), so the pathname-aware variant renders behind * and this list doubles as its pathname-agnostic fallback.
({ pathname }: { pathname: string | null })
| 29 | * and this list doubles as its pathname-agnostic fallback. |
| 30 | */ |
| 31 | function NavLinksList({ pathname }: { pathname: string | null }) { |
| 32 | return ( |
| 33 | <> |
| 34 | {navigationLinks.map((link) => ( |
| 35 | <Link |
| 36 | key={link.href} |
| 37 | href={link.href} |
| 38 | className={cn( |
| 39 | "chrome-label rounded-full px-3.5 py-2 font-medium transition-colors", |
| 40 | pathname !== null && link.match(pathname) |
| 41 | ? "text-foreground" |
| 42 | : "text-muted-foreground hover:text-foreground", |
| 43 | )} |
| 44 | > |
| 45 | {link.label} |
| 46 | </Link> |
| 47 | ))} |
| 48 | </> |
| 49 | ); |
| 50 | } |
| 51 | |
| 52 | function ActiveNavLinks() { |
| 53 | const pathname = usePathname(); |