38 lines
1.1 KiB
TypeScript
38 lines
1.1 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { cn } from "@/lib/utils";
|
|
import { Calendar, User, MapPin } from "lucide-react";
|
|
|
|
const views = [
|
|
{ key: "year", label: "Year", icon: Calendar },
|
|
{ key: "recipient", label: "Recipient", icon: User },
|
|
{ key: "location", label: "Location", icon: MapPin },
|
|
];
|
|
|
|
export function LettersNav({ currentView }: { currentView: string }) {
|
|
return (
|
|
<div className="flex gap-2 border-b border-border pb-3">
|
|
{views.map((v) => {
|
|
const Icon = v.icon;
|
|
const isActive = currentView === v.key;
|
|
return (
|
|
<Link
|
|
key={v.key}
|
|
href={`/letters?view=${v.key}`}
|
|
className={cn(
|
|
"flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-colors",
|
|
isActive
|
|
? "bg-primary/10 text-primary"
|
|
: "text-muted-foreground hover:bg-muted hover:text-foreground",
|
|
)}
|
|
>
|
|
<Icon className="size-4" />
|
|
{v.label}
|
|
</Link>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
}
|