51 lines
1.4 KiB
TypeScript
51 lines
1.4 KiB
TypeScript
//* PACKAGES
|
|
import {
|
|
Breadcrumb,
|
|
BreadcrumbItem,
|
|
BreadcrumbList,
|
|
BreadcrumbSeparator,
|
|
} from "@/components/ui/breadcrumb";
|
|
import { Link } from "@inertiajs/react";
|
|
//* THEME
|
|
import { cn } from "@/lib/utils";
|
|
|
|
export default function BreadcrumbsBase({
|
|
className,
|
|
breadcrumbs,
|
|
}: {
|
|
className?: string;
|
|
breadcrumbs?: Array<{
|
|
title: string;
|
|
url: string;
|
|
}>;
|
|
}) {
|
|
return (
|
|
breadcrumbs && (
|
|
<Breadcrumb className={cn(className)}>
|
|
<BreadcrumbList>
|
|
{breadcrumbs.map((breadcrumb, breadcrumbIndex) => (
|
|
<ul
|
|
key={breadcrumb.url}
|
|
className="flex flex-wrap items-center gap-1 break-words sm:gap-2.5"
|
|
>
|
|
{breadcrumbIndex >= 1 && <BreadcrumbSeparator />}
|
|
<BreadcrumbItem className="text-primary-foreground/70">
|
|
{breadcrumbIndex !== breadcrumbs.length - 1 &&
|
|
breadcrumb.url ? (
|
|
<Link
|
|
href={breadcrumb.url}
|
|
className="rounded-md text-primary-foreground 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>
|
|
)
|
|
);
|
|
}
|