60 lines
1.5 KiB
TypeScript
60 lines
1.5 KiB
TypeScript
import { Box } from '@/ui/primitives/Box';
|
|
|
|
interface RaceStatusBadgeProps {
|
|
status: 'scheduled' | 'running' | 'completed' | 'cancelled' | string;
|
|
}
|
|
|
|
export function RaceStatusBadge({ status }: RaceStatusBadgeProps) {
|
|
const config = {
|
|
scheduled: {
|
|
variant: 'info' as const,
|
|
label: 'SCHEDULED',
|
|
color: 'text-primary-blue',
|
|
bg: 'bg-primary-blue/10',
|
|
border: 'border-primary-blue/30'
|
|
},
|
|
running: {
|
|
variant: 'success' as const,
|
|
label: 'LIVE',
|
|
color: 'text-performance-green',
|
|
bg: 'bg-performance-green/10',
|
|
border: 'border-performance-green/30'
|
|
},
|
|
completed: {
|
|
variant: 'neutral' as const,
|
|
label: 'COMPLETED',
|
|
color: 'text-gray-400',
|
|
bg: 'bg-gray-400/10',
|
|
border: 'border-gray-400/30'
|
|
},
|
|
cancelled: {
|
|
variant: 'warning' as const,
|
|
label: 'CANCELLED',
|
|
color: 'text-warning-amber',
|
|
bg: 'bg-warning-amber/10',
|
|
border: 'border-warning-amber/30'
|
|
},
|
|
};
|
|
|
|
const badgeConfig = config[status as keyof typeof config] || {
|
|
variant: 'neutral' as const,
|
|
label: status.toUpperCase(),
|
|
color: 'text-gray-400',
|
|
bg: 'bg-gray-400/10',
|
|
border: 'border-gray-400/30'
|
|
};
|
|
|
|
return (
|
|
<Box
|
|
px={2.5}
|
|
py={0.5}
|
|
rounded="none"
|
|
border
|
|
className={`${badgeConfig.bg} ${badgeConfig.color} ${badgeConfig.border}`}
|
|
style={{ fontSize: '10px', fontWeight: '800', letterSpacing: '0.05em' }}
|
|
>
|
|
{badgeConfig.label}
|
|
</Box>
|
|
);
|
|
}
|