48 lines
1.5 KiB
TypeScript
48 lines
1.5 KiB
TypeScript
|
"use client"
|
||
|
|
|
||
|
|
import { usePathname } from "next/navigation"
|
||
|
|
import Link from "next/link"
|
||
|
|
import { ChevronRight, Home } from "lucide-react"
|
||
|
|
|
||
|
|
export function Breadcrumbs() {
|
||
|
|
const pathname = usePathname()
|
||
|
|
|
||
|
|
// Skip breadcrumbs on home page
|
||
|
|
if (pathname === "/") return null
|
||
|
|
|
||
|
|
// Split the pathname into segments
|
||
|
|
const segments = pathname.split("/").filter(Boolean)
|
||
|
|
|
||
|
|
// Create breadcrumb items
|
||
|
|
const breadcrumbs = [
|
||
|
|
{ name: "Home", href: "/" },
|
||
|
|
...segments.map((segment, index) => {
|
||
|
|
const href = `/${segments.slice(0, index + 1).join("/")}`
|
||
|
|
// Format the segment name (capitalize first letter, replace hyphens with spaces)
|
||
|
|
const name = segment.replace(/-/g, " ").replace(/\b\w/g, (char) => char.toUpperCase())
|
||
|
|
|
||
|
|
return { name, href }
|
||
|
|
}),
|
||
|
|
]
|
||
|
|
|
||
|
|
return (
|
||
|
|
<nav className="flex px-4 py-2 text-sm text-muted-foreground">
|
||
|
|
<ol className="flex items-center space-x-1">
|
||
|
|
{breadcrumbs.map((breadcrumb, index) => (
|
||
|
|
<li key={breadcrumb.href} className="flex items-center">
|
||
|
|
{index > 0 && <ChevronRight className="mx-1 h-4 w-4" />}
|
||
|
|
{index === breadcrumbs.length - 1 ? (
|
||
|
|
<span className="font-medium text-foreground">{breadcrumb.name}</span>
|
||
|
|
) : (
|
||
|
|
<Link href={breadcrumb.href} className="hover:text-foreground hover:underline">
|
||
|
|
{index === 0 ? <Home className="h-4 w-4" /> : breadcrumb.name}
|
||
|
|
</Link>
|
||
|
|
)}
|
||
|
|
</li>
|
||
|
|
))}
|
||
|
|
</ol>
|
||
|
|
</nav>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|