62 lines
2.0 KiB
TypeScript
62 lines
2.0 KiB
TypeScript
'use client';
|
|
|
|
import { Stack } from '@/ui/Stack';
|
|
import { Text } from '@/ui/Text';
|
|
|
|
export type ProfileTab = 'overview' | 'history' | 'stats' | 'leagues' | 'liveries' | 'settings';
|
|
|
|
interface ProfileNavTabsProps {
|
|
activeTab: ProfileTab;
|
|
onTabChange: (tab: ProfileTab) => void;
|
|
tabs?: { id: ProfileTab; label: string }[];
|
|
}
|
|
|
|
const DEFAULT_TABS: { id: ProfileTab; label: string }[] = [
|
|
{ id: 'overview', label: 'Overview' },
|
|
{ id: 'history', label: 'History' },
|
|
{ id: 'stats', label: 'Stats' },
|
|
{ id: 'leagues', label: 'Leagues' },
|
|
{ id: 'liveries', label: 'Liveries' },
|
|
{ id: 'settings', label: 'Settings' },
|
|
];
|
|
|
|
export function ProfileNavTabs({ activeTab, onTabChange, tabs = DEFAULT_TABS }: ProfileNavTabsProps) {
|
|
return (
|
|
<Stack as="nav" {...({ 'aria-label': 'Profile navigation' } as any)}>
|
|
<Stack borderBottom borderColor="#23272B">
|
|
<Stack direction="row" gap={8}>
|
|
{tabs.map((tab) => (
|
|
<Stack
|
|
key={tab.id}
|
|
onClick={() => onTabChange(tab.id)}
|
|
pb={4}
|
|
cursor="pointer"
|
|
borderBottom
|
|
borderColor={activeTab === tab.id ? '#198CFF' : 'transparent'}
|
|
color={activeTab === tab.id ? '#198CFF' : '#9ca3af'}
|
|
transition
|
|
fontSize="0.875rem"
|
|
fontWeight={activeTab === tab.id ? 'semibold' : 'normal'}
|
|
position="relative"
|
|
className="group mb-[-1px]"
|
|
>
|
|
<Text capitalize>{tab.label}</Text>
|
|
{activeTab === tab.id && (
|
|
<Stack
|
|
position="absolute"
|
|
bottom={0}
|
|
left={0}
|
|
right={0}
|
|
height="2px"
|
|
backgroundColor="#198CFF"
|
|
{...({ boxShadow: "0 0 8px rgba(25, 140, 255, 0.5)" } as any)}
|
|
>{null}</Stack>
|
|
)}
|
|
</Stack>
|
|
))}
|
|
</Stack>
|
|
</Stack>
|
|
</Stack>
|
|
);
|
|
}
|