70 lines
1.8 KiB
TypeScript
70 lines
1.8 KiB
TypeScript
import React from 'react';
|
|
import { Box } from './Box';
|
|
import { Text } from './Text';
|
|
import { Icon } from './Icon';
|
|
import { LucideIcon } from 'lucide-react';
|
|
|
|
interface Tab {
|
|
id: string;
|
|
label: string;
|
|
icon?: LucideIcon;
|
|
}
|
|
|
|
interface TabNavigationProps {
|
|
tabs: Tab[];
|
|
activeTab: string;
|
|
onTabChange: (tabId: string) => void;
|
|
className?: string;
|
|
}
|
|
|
|
export function TabNavigation({ tabs, activeTab, onTabChange, className = '' }: TabNavigationProps) {
|
|
return (
|
|
<Box
|
|
display="flex"
|
|
alignItems="center"
|
|
gap={1}
|
|
p={1.5}
|
|
rounded="xl"
|
|
bg="bg-iron-gray/50"
|
|
border
|
|
borderColor="border-charcoal-outline"
|
|
w="fit"
|
|
position="relative"
|
|
zIndex={10}
|
|
className={className}
|
|
>
|
|
{tabs.map((tab) => {
|
|
const isActive = activeTab === tab.id;
|
|
return (
|
|
<Box
|
|
key={tab.id}
|
|
as="button"
|
|
type="button"
|
|
onClick={() => onTabChange(tab.id)}
|
|
display="flex"
|
|
alignItems="center"
|
|
gap={2}
|
|
px={5}
|
|
py={2.5}
|
|
rounded="lg"
|
|
cursor="pointer"
|
|
transition
|
|
bg={isActive ? 'bg-primary-blue' : ''}
|
|
className={`select-none ${isActive ? 'shadow-lg shadow-primary-blue/25' : 'hover:bg-iron-gray/80'}`}
|
|
>
|
|
{tab.icon && <Icon icon={tab.icon} size={4} color={isActive ? 'text-white' : 'text-gray-400'} />}
|
|
<Text
|
|
size="sm"
|
|
weight="medium"
|
|
color={isActive ? 'text-white' : 'text-gray-400'}
|
|
className={!isActive ? 'hover:text-white' : ''}
|
|
>
|
|
{tab.label}
|
|
</Text>
|
|
</Box>
|
|
);
|
|
})}
|
|
</Box>
|
|
);
|
|
}
|