47 lines
1.8 KiB
TypeScript
47 lines
1.8 KiB
TypeScript
// * Packages
|
|
import { Link, usePage } from "@inertiajs/react";
|
|
// * Components shadcn
|
|
import {
|
|
Breadcrumb,
|
|
BreadcrumbItem,
|
|
BreadcrumbList,
|
|
BreadcrumbSeparator,
|
|
} from "@/components/ui/breadcrumb";
|
|
// * Other
|
|
import { cn } from "@/lib/utils";
|
|
|
|
export default function AppBreadcrumbs({ className }: { className: string }) {
|
|
const breadcrumbs = usePage().props.breacrumbs as Array<{
|
|
title: string;
|
|
url: string;
|
|
}>;
|
|
return (
|
|
breadcrumbs && (
|
|
<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-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
|
|
>
|
|
{breadcrumb.title}
|
|
</Link>
|
|
) : (
|
|
breadcrumb.title
|
|
)}
|
|
</BreadcrumbItem>
|
|
</ul>
|
|
))}
|
|
</BreadcrumbList>
|
|
</Breadcrumb>
|
|
)
|
|
);
|
|
}
|