65 lines
1.6 KiB
TypeScript
65 lines
1.6 KiB
TypeScript
import { Box } from './Box';
|
|
|
|
|
|
export interface TabOption {
|
|
id: string;
|
|
label: string;
|
|
icon?: React.ReactNode;
|
|
count?: number;
|
|
}
|
|
|
|
export interface BorderTabsProps {
|
|
tabs: TabOption[];
|
|
activeTabId?: string;
|
|
onTabChange: (id: string) => void;
|
|
activeTab?: string;
|
|
}
|
|
|
|
export const BorderTabs = ({
|
|
tabs,
|
|
activeTabId,
|
|
onTabChange,
|
|
activeTab
|
|
}: BorderTabsProps) => {
|
|
const finalActiveTabId = activeTabId || activeTab || '';
|
|
|
|
return (
|
|
<Box display="flex" borderBottom>
|
|
{tabs.map((tab) => {
|
|
const isActive = tab.id === finalActiveTabId;
|
|
return (
|
|
<button
|
|
key={tab.id}
|
|
onClick={() => onTabChange(tab.id)}
|
|
className={`px-6 py-4 text-sm font-bold uppercase tracking-widest transition-all relative ${
|
|
isActive
|
|
? 'text-[var(--ui-color-intent-primary)]'
|
|
: 'text-[var(--ui-color-text-low)] hover:text-[var(--ui-color-text-high)]'
|
|
}`}
|
|
>
|
|
<Box display="flex" alignItems="center" gap={2}>
|
|
{tab.icon}
|
|
{tab.label}
|
|
{tab.count !== undefined && (
|
|
<Box as="span" px={1.5} py={0.5} rounded="full" bg="white/10" fontSize="10px">
|
|
{tab.count}
|
|
</Box>
|
|
)}
|
|
</Box>
|
|
{isActive && (
|
|
<Box
|
|
position="absolute"
|
|
bottom={0}
|
|
left={0}
|
|
right={0}
|
|
height="2px"
|
|
bg="var(--ui-color-intent-primary)"
|
|
/>
|
|
)}
|
|
</button>
|
|
);
|
|
})}
|
|
</Box>
|
|
);
|
|
};
|