58 lines
1.8 KiB
TypeScript
58 lines
1.8 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import { LayoutDashboard, BarChart3, ShieldCheck } from 'lucide-react';
|
|
import { Text } from '@/ui/Text';
|
|
import { Box } from '@/ui/Box';
|
|
|
|
export type ProfileTab = 'overview' | 'stats' | 'ratings';
|
|
|
|
interface DriverProfileTabsProps {
|
|
activeTab: ProfileTab;
|
|
onTabChange: (tab: ProfileTab) => void;
|
|
}
|
|
|
|
export function DriverProfileTabs({ activeTab, onTabChange }: DriverProfileTabsProps) {
|
|
const tabs = [
|
|
{ id: 'overview', label: 'Overview', icon: LayoutDashboard },
|
|
{ id: 'stats', label: 'Career Stats', icon: BarChart3 },
|
|
{ id: 'ratings', label: 'Ratings', icon: ShieldCheck },
|
|
] as const;
|
|
|
|
return (
|
|
<Box display="flex" alignItems="center" gap={1} borderBottom borderColor="border-charcoal-outline">
|
|
{tabs.map((tab) => {
|
|
const isActive = activeTab === tab.id;
|
|
const Icon = tab.icon;
|
|
|
|
return (
|
|
<Box
|
|
as="button"
|
|
key={tab.id}
|
|
onClick={() => onTabChange(tab.id)}
|
|
position="relative"
|
|
display="flex"
|
|
alignItems="center"
|
|
gap={2}
|
|
px={6}
|
|
py={4}
|
|
transition
|
|
hoverBg="bg-white/5"
|
|
color={isActive ? 'text-primary-blue' : 'text-gray-500'}
|
|
hoverTextColor={isActive ? 'text-primary-blue' : 'text-gray-300'}
|
|
>
|
|
<Icon size={18} />
|
|
<Text size="sm" weight={isActive ? 'bold' : 'medium'} color="inherit">
|
|
{tab.label}
|
|
</Text>
|
|
|
|
{isActive && (
|
|
<Box position="absolute" bottom="0" left="0" h="0.5" w="full" bg="bg-primary-blue" shadow="shadow-[0_0_8px_rgba(25,140,255,0.5)]" />
|
|
)}
|
|
</Box>
|
|
);
|
|
})}
|
|
</Box>
|
|
);
|
|
}
|