Files
gridpilot.gg/apps/website/components/drivers/DriverRatingPill.tsx
2026-01-18 16:43:32 +01:00

32 lines
973 B
TypeScript

import { Icon } from '@/ui/Icon';
import { Box } from '@/ui/primitives/Box';
import { Text } from '@/ui/Text';
import { Star, Trophy } from 'lucide-react';
interface DriverRatingPillProps {
rating: number | null;
rank: number | null;
}
export function DriverRatingPill({ rating, rank }: DriverRatingPillProps) {
return (
<Box display="flex" alignItems="center" gap={2} mt={0.5} style={{ fontSize: '11px' }}>
<Box display="inline-flex" alignItems="center" gap={1}>
<Icon icon={Star} size={3} color="var(--warning-amber)" />
<Text color="text-amber-300" className="tabular-nums">
{rating !== null ? rating : '—'}
</Text>
</Box>
{rank !== null && (
<Box display="inline-flex" alignItems="center" gap={1}>
<Icon icon={Trophy} size={3} color="var(--primary-blue)" />
<Text color="text-primary-blue" className="tabular-nums">#{rank}</Text>
</Box>
)}
</Box>
);
}