26 خطوط
1.4 KiB
TypeScript
26 خطوط
1.4 KiB
TypeScript
"use client";
|
|
|
|
import * as Icons from "@/components/shared/ui-icons";
|
|
import { X } from "@/components/shared/ui-icons";
|
|
import type { LucideProps } from "@/components/shared/ui-icons";
|
|
import type { AccessTab } from "@/types/rolesAccess";
|
|
|
|
export function RolesAccessTabs({ tabs, activeTabId, onActivate, onClose }: { tabs: AccessTab[]; activeTabId: string | null; onActivate: (id: string) => void; onClose: (id: string) => void }) {
|
|
if (!tabs.length) return null;
|
|
return (
|
|
<div className="flex gap-1 overflow-x-auto border-b border-white/10 px-4 pt-3 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
|
|
{tabs.map((tab) => {
|
|
const Icon = tab.icon ? (Icons as unknown as Record<string, React.ComponentType<LucideProps>>)[tab.icon] ?? Icons.Folder : Icons.Folder;
|
|
const active = tab.id === activeTabId;
|
|
return (
|
|
<button key={tab.id} onClick={() => onActivate(tab.id)} className={`flex min-w-36 items-center gap-2 rounded-t-2xl px-3 py-2 text-sm transition ${active ? "bg-white/25 font-black" : "bg-white/10 hover:bg-white/15"}`}>
|
|
<Icon className="h-4 w-4" />
|
|
<span className="truncate">{tab.titleFa}</span>
|
|
{tab.isClosable ? <span onClick={(event) => { event.stopPropagation(); onClose(tab.id); }} className="rounded-full p-1 hover:bg-white/20"><X className="h-3.5 w-3.5" /></span> : null}
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
}
|