65 lines
1.8 KiB
TypeScript
65 lines
1.8 KiB
TypeScript
|
|
|
|
import { Badge } from './Badge';
|
|
import { Box } from './Box';
|
|
import { Text } from './Text';
|
|
|
|
interface Tab {
|
|
id: string;
|
|
label: string;
|
|
count?: number;
|
|
countVariant?: 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info';
|
|
}
|
|
|
|
interface BorderTabsProps {
|
|
tabs: Tab[];
|
|
activeTab: string;
|
|
onTabChange: (tabId: string) => void;
|
|
}
|
|
|
|
export function BorderTabs({ tabs, activeTab, onTabChange }: BorderTabsProps) {
|
|
return (
|
|
<Box borderBottom borderColor="border-charcoal-outline">
|
|
<Box display="flex" gap={4}>
|
|
{tabs.map((tab) => {
|
|
const isActive = activeTab === tab.id;
|
|
return (
|
|
<Box
|
|
key={tab.id}
|
|
as="button"
|
|
type="button"
|
|
onClick={() => onTabChange(tab.id)}
|
|
pb={3}
|
|
px={1}
|
|
cursor="pointer"
|
|
transition
|
|
borderBottom={isActive}
|
|
borderColor={isActive ? 'border-primary-blue' : ''}
|
|
style={{
|
|
borderBottomWidth: isActive ? '2px' : '0',
|
|
marginBottom: '-1px'
|
|
}}
|
|
>
|
|
<Box display="flex" alignItems="center" gap={2}>
|
|
<Text
|
|
size="sm"
|
|
weight="medium"
|
|
color={isActive ? 'text-primary-blue' : 'text-gray-400'}
|
|
className={!isActive ? 'hover:text-white' : ''}
|
|
>
|
|
{tab.label}
|
|
</Text>
|
|
{tab.count !== undefined && tab.count > 0 && (
|
|
<Badge variant={tab.countVariant || 'warning'}>
|
|
{tab.count}
|
|
</Badge>
|
|
)}
|
|
</Box>
|
|
</Box>
|
|
);
|
|
})}
|
|
</Box>
|
|
</Box>
|
|
);
|
|
}
|