49 lines
1.2 KiB
TypeScript
49 lines
1.2 KiB
TypeScript
import { Box } from './Box';
|
|
|
|
|
|
export interface BorderTabsProps {
|
|
tabs: TabOption[];
|
|
activeTabId: string;
|
|
onTabChange: (id: string) => void;
|
|
}
|
|
|
|
export const BorderTabs = ({
|
|
tabs,
|
|
activeTabId,
|
|
onTabChange
|
|
}: BorderTabsProps) => {
|
|
return (
|
|
<Box display="flex" borderBottom>
|
|
{tabs.map((tab) => {
|
|
const isActive = tab.id === activeTabId;
|
|
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}
|
|
</Box>
|
|
{isActive && (
|
|
<Box
|
|
position="absolute"
|
|
bottom={0}
|
|
left={0}
|
|
right={0}
|
|
height="2px"
|
|
bg="var(--ui-color-intent-primary)"
|
|
/>
|
|
)}
|
|
</button>
|
|
);
|
|
})}
|
|
</Box>
|
|
);
|
|
};
|