star-erp/resources/js/Components/shared/BreadcrumbNav.tsx

import React from "react";
import { Link } from "@inertiajs/react";
import {
    Breadcrumb,
    BreadcrumbItem,
    BreadcrumbLink,
    BreadcrumbList,
    BreadcrumbPage,
    BreadcrumbSeparator,
} from "@/Components/ui/breadcrumb";
import { cn } from "@/lib/utils";

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 || !item.href || item.href === "#") ? (
                                <BreadcrumbPage className={cn(
                                    "font-medium",
                                    item.isPage ? "text-gray-500" : "text-gray-400 cursor-default"
                                )}>
                                    {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;