test new layout

src/components/Breadcrumbs.tsx

@@ -0,0 +1,72 @@
+"use client";
+
+import { usePathname } from "next/navigation";
+import Link from "next/link";
+import { ChevronRight } from "lucide-react";
+import { cn } from "@app/lib/cn";
+
+interface BreadcrumbItem {
+    label: string;
+    href: string;
+}
+
+export function Breadcrumbs() {
+    const pathname = usePathname();
+    const segments = pathname.split("/").filter(Boolean);
+
+    const breadcrumbs: BreadcrumbItem[] = segments.map((segment, index) => {
+        const href = `/${segments.slice(0, index + 1).join("/")}`;
+        let label = segment;
+
+        // Format labels
+        if (segment === "settings") {
+            label = "Settings";
+        } else if (segment === "sites") {
+            label = "Sites";
+        } else if (segment === "resources") {
+            label = "Resources";
+        } else if (segment === "access") {
+            label = "Users & Roles";
+        } else if (segment === "general") {
+            label = "General";
+        } else if (segment === "share-links") {
+            label = "Shareable Links";
+        } else if (segment === "users") {
+            label = "Users";
+        } else if (segment === "roles") {
+            label = "Roles";
+        } else if (segment === "invitations") {
+            label = "Invitations";
+        } else if (segment === "connectivity") {
+            label = "Connectivity";
+        } else if (segment === "authentication") {
+            label = "Authentication";
+        }
+
+        return { label, href };
+    });
+
+    return (
+        <div className="border-b px-4 py-2">
+            <nav className="flex items-center space-x-1 text-sm text-muted-foreground">
+                <Link href="/" className="hover:text-foreground">
+                    Home
+                </Link>
+                {breadcrumbs.map((crumb, index) => (
+                    <div key={crumb.href} className="flex items-center">
+                        <ChevronRight className="h-4 w-4" />
+                        <Link
+                            href={crumb.href}
+                            className={cn(
+                                "ml-1 hover:text-foreground",
+                                index === breadcrumbs.length - 1 && "text-foreground font-medium"
+                            )}
+                        >
+                            {crumb.label}
+                        </Link>
+                    </div>
+                ))}
+            </nav>
+        </div>
+    );
+}