first commit

resources/js/Components/shared/BreadcrumbNav.tsx

@@ -0,0 +1,51 @@
+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;