45 lines
1.4 KiB
TypeScript
45 lines
1.4 KiB
TypeScript
import { Link, usePage } from "@inertiajs/react";
|
|
|
|
import {
|
|
Breadcrumb,
|
|
BreadcrumbItem,
|
|
BreadcrumbList,
|
|
BreadcrumbSeparator,
|
|
} from "@/components/ui/breadcrumb";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
export default function AppBreadcrumbs({ className }: { className: string }) {
|
|
const breadcrumbs = usePage().props.breadcrumbs as {
|
|
title: string;
|
|
url: string;
|
|
}[];
|
|
return (
|
|
breadcrumbs.length && (
|
|
<Breadcrumb className={cn("md:border-s md:ms-1 px-4", className)}>
|
|
<BreadcrumbList>
|
|
{breadcrumbs.map((breadcrumb, breadcrumbIndex) => (
|
|
<ul
|
|
key={breadcrumb.url}
|
|
className="flex flex-wrap items-center gap-1.5 break-words sm:gap-2.5"
|
|
>
|
|
{breadcrumbIndex >= 1 && <BreadcrumbSeparator />}
|
|
<BreadcrumbItem>
|
|
{breadcrumbIndex !== breadcrumbs.length - 1 &&
|
|
breadcrumb.url ? (
|
|
<Link
|
|
href={breadcrumb.url}
|
|
className="rounded-md focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
|
|
>
|
|
{breadcrumb.title}
|
|
</Link>
|
|
) : (
|
|
breadcrumb.title
|
|
)}
|
|
</BreadcrumbItem>
|
|
</ul>
|
|
))}
|
|
</BreadcrumbList>
|
|
</Breadcrumb>
|
|
)
|
|
);
|
|
}
|