85 lines
3.2 KiB
TypeScript
85 lines
3.2 KiB
TypeScript
"use client";
|
|
|
|
import React from "react";
|
|
import Link from "next/link";
|
|
import { useParams, usePathname } from "next/navigation";
|
|
import { cn } from "@app/lib/cn";
|
|
|
|
export type HorizontalTabs = Array<{
|
|
title: string;
|
|
href: string;
|
|
icon?: React.ReactNode;
|
|
}>;
|
|
|
|
interface HorizontalTabsProps {
|
|
children: React.ReactNode;
|
|
items: HorizontalTabs;
|
|
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)
|
|
.replace("{resourceId}", params.resourceId as string)
|
|
.replace("{niceId}", params.niceId as string)
|
|
.replace("{userId}", params.userId as string)
|
|
.replace("{apiKeyId}", params.apiKeyId 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={(e) => {
|
|
if (disabled) {
|
|
e.preventDefault();
|
|
}
|
|
}}
|
|
tabIndex={disabled ? -1 : undefined}
|
|
aria-disabled={disabled}
|
|
>
|
|
<div
|
|
className={cn(
|
|
"flex items-center space-x-2",
|
|
disabled && "opacity-60"
|
|
)}
|
|
>
|
|
{item.icon && item.icon}
|
|
<span>{item.title}</span>
|
|
</div>
|
|
</Link>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="space-y-6">{children}</div>
|
|
</div>
|
|
);
|
|
}
|