52 lines
1.6 KiB
TypeScript
52 lines
1.6 KiB
TypeScript
|
import React from "react";
|
||
|
|
import { Link } from "@inertiajs/react";
|
||
|
|
import {
|
||
|
|
Breadcrumb,
|
||
|
|
BreadcrumbItem,
|
||
|
|
BreadcrumbLink,
|
||
|
|
BreadcrumbList,
|
||
|
|
BreadcrumbPage,
|
||
|
|
BreadcrumbSeparator,
|
||
|
|
} from "@/Components/ui/breadcrumb";
|
||
|
|
|
||
|
|
export interface BreadcrumbItemType {
|
||
|
|
label: string;
|
||
|
|
href?: string;
|
||
|
|
isPage?: boolean;
|
||
|
|
}
|
||
|
|
|
||
|
|
interface BreadcrumbNavProps {
|
||
|
|
items: BreadcrumbItemType[];
|
||
|
|
className?: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
const BreadcrumbNav = ({ items, className }: BreadcrumbNavProps) => {
|
||
|
|
return (
|
||
|
|
<Breadcrumb className={className}>
|
||
|
|
<BreadcrumbList>
|
||
|
|
{items.map((item, index) => (
|
||
|
|
<React.Fragment key={index}>
|
||
|
|
<BreadcrumbItem>
|
||
|
|
{item.isPage ? (
|
||
|
|
<BreadcrumbPage className="text-gray-500">{item.label}</BreadcrumbPage>
|
||
|
|
) : (
|
||
|
|
<BreadcrumbLink asChild>
|
||
|
|
<Link
|
||
|
|
href={item.href || "#"}
|
||
|
|
className="text-[#01ab83] hover:text-[#018a6a] font-medium transition-colors"
|
||
|
|
>
|
||
|
|
{item.label}
|
||
|
|
</Link>
|
||
|
|
</BreadcrumbLink>
|
||
|
|
)}
|
||
|
|
</BreadcrumbItem>
|
||
|
|
{index < items.length - 1 && <BreadcrumbSeparator />}
|
||
|
|
</React.Fragment>
|
||
|
|
))}
|
||
|
|
</BreadcrumbList>
|
||
|
|
</Breadcrumb>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default BreadcrumbNav;
|