test new layout

2026-02-28 15:56:39 +00:00 · 2025-04-12 15:04:32 -04:00
parent f14379a1c8
commit 1a750e8279
38 changed files with 992 additions and 1622 deletions
--- a/src/components/HorizontalTabs.tsx
+++ b/src/components/HorizontalTabs.tsx
@@ -0,0 +1,74 @@
+"use client";
+
+import React from "react";
+import Link from "next/link";
+import { useParams, usePathname } from "next/navigation";
+import { cn } from "@app/lib/cn";
+import { buttonVariants } from "@/components/ui/button";
+
+interface HorizontalTabsProps {
+    children: React.ReactNode;
+    items: Array<{
+        title: string;
+        href: string;
+        icon?: React.ReactNode;
+    }>;
+    disabled?: boolean;
+}
+
+export function HorizontalTabs({
+    children,
+    items,
+    disabled = false
+}: HorizontalTabsProps) {
+    const pathname = usePathname();
+    const params = useParams();
+
+    function hydrateHref(href: string) {
+        return href.replace("{orgId}", params.orgId as string);
+    }
+
+    return (
+        <div className="space-y-6">
+            <div className="relative">
+                <div className="overflow-x-auto scrollbar-hide">
+                    <div className="flex space-x-4 border-b min-w-max">
+                        {items.map((item) => {
+                            const hydratedHref = hydrateHref(item.href);
+                            const isActive = pathname.startsWith(hydratedHref) && !pathname.includes("create");
+
+                            return (
+                                <Link
+                                    key={hydratedHref}
+                                    href={hydratedHref}
+                                    className={cn(
+                                        "px-4 py-2 text-sm font-medium transition-colors whitespace-nowrap",
+                                        isActive
+                                            ? "border-b-2 border-primary text-primary"
+                                            : "text-muted-foreground hover:text-foreground",
+                                        disabled && "cursor-not-allowed"
+                                    )}
+                                    onClick={disabled ? (e) => e.preventDefault() : undefined}
+                                    tabIndex={disabled ? -1 : undefined}
+                                    aria-disabled={disabled}
+                                >
+                                    {item.icon ? (
+                                        <div className="flex items-center space-x-2">
+                                            {item.icon}
+                                            <span>{item.title}</span>
+                                        </div>
+                                    ) : (
+                                        item.title
+                                    )}
+                                </Link>
+                            );
+                        })}
+                    </div>
+                </div>
+            </div>
+            <div className="space-y-6">
+                {children}
+            </div>
+        </div>
+    );
+}