49 lines
1.4 KiB
TypeScript
49 lines
1.4 KiB
TypeScript
"use client"
|
|
|
|
import Link from "next/link"
|
|
import { usePathname } from "next/navigation"
|
|
import { ExternalLink } from "lucide-react"
|
|
|
|
const links = [
|
|
{ href: "/", label: "Search" },
|
|
{ href: "/chat", label: "Agent" },
|
|
{ href: "/docs", label: "API Docs" },
|
|
]
|
|
|
|
export function NavLinks() {
|
|
const pathname = usePathname()
|
|
|
|
return (
|
|
<div className="flex items-center gap-3 sm:gap-6">
|
|
{links.map(({ href, label }) => {
|
|
const isActive =
|
|
href === "/" ? pathname === "/" : pathname.startsWith(href)
|
|
return (
|
|
<Link
|
|
key={href}
|
|
href={href}
|
|
className={`whitespace-nowrap text-sm transition-colors hover:text-foreground ${
|
|
isActive
|
|
? "nav-link-active text-foreground"
|
|
: "text-muted-foreground"
|
|
}`}
|
|
>
|
|
{label}
|
|
</Link>
|
|
)
|
|
})}
|
|
{/* Status page is hosted independently (GitHub Pages) so it survives
|
|
outages of this app — industry best practice (cf. githubstatus.com) */}
|
|
<a
|
|
href="https://status.pixelrag.ai"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="hidden items-center gap-1 whitespace-nowrap text-sm text-muted-foreground transition-colors hover:text-foreground sm:flex"
|
|
>
|
|
Status
|
|
<ExternalLink className="h-3 w-3" />
|
|
</a>
|
|
</div>
|
|
)
|
|
}
|