73 lines
1.7 KiB
TypeScript
73 lines
1.7 KiB
TypeScript
'use client';
|
|
|
|
import { Text } from '@/ui/Text';
|
|
import { Box } from '@/ui/primitives/Box';
|
|
import { Shield } from 'lucide-react';
|
|
|
|
interface SafetyRatingBadgeProps {
|
|
rating: number;
|
|
size?: 'sm' | 'md' | 'lg';
|
|
}
|
|
|
|
export function SafetyRatingBadge({ rating, size = 'md' }: SafetyRatingBadgeProps) {
|
|
const getColor = (r: number) => {
|
|
if (r >= 90) return 'text-performance-green';
|
|
if (r >= 70) return 'text-warning-amber';
|
|
return 'text-red-500';
|
|
};
|
|
|
|
const getBgColor = (r: number) => {
|
|
if (r >= 90) return 'bg-performance-green/10';
|
|
if (r >= 70) return 'bg-warning-amber/10';
|
|
return 'bg-red-500/10';
|
|
};
|
|
|
|
const getBorderColor = (r: number) => {
|
|
if (r >= 90) return 'border-performance-green/20';
|
|
if (r >= 70) return 'border-warning-amber/20';
|
|
return 'border-red-500/20';
|
|
};
|
|
|
|
const sizeProps = {
|
|
sm: { px: 2, py: 0.5, gap: 1 },
|
|
md: { px: 3, py: 1, gap: 1.5 },
|
|
lg: { px: 4, py: 2, gap: 2 },
|
|
};
|
|
|
|
const iconSizes = {
|
|
sm: 12,
|
|
md: 14,
|
|
lg: 16,
|
|
};
|
|
|
|
const iconColors = {
|
|
'text-performance-green': '#22C55E',
|
|
'text-warning-amber': '#FFBE4D',
|
|
'text-red-500': '#EF4444',
|
|
};
|
|
|
|
const colorClass = getColor(rating);
|
|
|
|
return (
|
|
<Box
|
|
display="inline-flex"
|
|
alignItems="center"
|
|
rounded="full"
|
|
border
|
|
bg={getBgColor(rating)}
|
|
borderColor={getBorderColor(rating)}
|
|
{...sizeProps[size]}
|
|
>
|
|
<Shield size={iconSizes[size]} color={iconColors[colorClass as keyof typeof iconColors]} />
|
|
<Text
|
|
size={size === 'lg' ? 'sm' : 'xs'}
|
|
weight="bold"
|
|
font="mono"
|
|
color={colorClass}
|
|
>
|
|
SR {rating.toFixed(0)}
|
|
</Text>
|
|
</Box>
|
|
);
|
|
}
|