82 lines
2.1 KiB
TypeScript
82 lines
2.1 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { usePathname } from "next/navigation";
|
|
import { ChevronRight, Home } from "lucide-react";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
// Route label mappings
|
|
const routeLabels: Record<string, string> = {
|
|
"/": "Dashboard",
|
|
"/activity": "Activity",
|
|
"/calendar": "Calendar",
|
|
"/tasks": "Tasks",
|
|
"/projects": "Projects",
|
|
"/documents": "Documents",
|
|
"/tools": "Tools",
|
|
"/mission": "Mission",
|
|
};
|
|
|
|
interface BreadcrumbItem {
|
|
href: string;
|
|
label: string;
|
|
isLast: boolean;
|
|
}
|
|
|
|
export function Breadcrumbs() {
|
|
const pathname = usePathname();
|
|
|
|
// Generate breadcrumb items from pathname
|
|
const getBreadcrumbItems = (): BreadcrumbItem[] => {
|
|
const items: BreadcrumbItem[] = [
|
|
{ href: "/", label: "Home", isLast: pathname === "/" },
|
|
];
|
|
|
|
// Skip home for other paths
|
|
if (pathname === "/") return items;
|
|
|
|
// Add current page
|
|
const label = routeLabels[pathname] || pathname.split("/").pop() || "";
|
|
items.push({
|
|
href: pathname,
|
|
label: label.charAt(0).toUpperCase() + label.slice(1),
|
|
isLast: true,
|
|
});
|
|
|
|
return items;
|
|
};
|
|
|
|
const items = getBreadcrumbItems();
|
|
|
|
return (
|
|
<nav
|
|
aria-label="Breadcrumb"
|
|
className="flex items-center space-x-1 text-sm text-muted-foreground mb-6"
|
|
>
|
|
{items.map((item, index) => (
|
|
<div key={item.href} className="flex items-center">
|
|
{index > 0 && (
|
|
<ChevronRight className="w-4 h-4 mx-1 text-muted-foreground/50" />
|
|
)}
|
|
{item.isLast ? (
|
|
<span className="font-medium text-foreground" aria-current="page">
|
|
{item.label}
|
|
</span>
|
|
) : (
|
|
<Link
|
|
href={item.href}
|
|
className={cn(
|
|
"hover:text-foreground transition-colors flex items-center gap-1",
|
|
index === 0 && "text-muted-foreground hover:text-foreground"
|
|
)}
|
|
>
|
|
{index === 0 && <Home className="w-3.5 h-3.5" />}
|
|
{item.label}
|
|
</Link>
|
|
)}
|
|
</div>
|
|
))}
|
|
</nav>
|
|
);
|
|
}
|