52 lines
1.3 KiB
TypeScript
52 lines
1.3 KiB
TypeScript
|
|
|
|
import { Stack } from '@/ui/Stack';
|
|
import { ProgressBar } from '@/ui/ProgressBar';
|
|
import { Text } from '@/ui/Text';
|
|
|
|
interface RatingComponentProps {
|
|
label: string;
|
|
value: number;
|
|
maxValue: number;
|
|
color: string;
|
|
suffix?: string;
|
|
description: string;
|
|
breakdown: { label: string; percentage: number }[];
|
|
}
|
|
|
|
export function RatingComponent({
|
|
label,
|
|
value,
|
|
maxValue,
|
|
color,
|
|
suffix = '',
|
|
description,
|
|
breakdown,
|
|
}: RatingComponentProps) {
|
|
const percentage = (value / maxValue) * 100;
|
|
|
|
return (
|
|
<Stack>
|
|
<Stack display="flex" alignItems="center" justifyContent="between" mb={2}>
|
|
<Text weight="medium" color="text-white">{label}</Text>
|
|
<Text size="2xl" weight="bold" color={color}>
|
|
{value}{suffix}
|
|
</Text>
|
|
</Stack>
|
|
|
|
<ProgressBar value={percentage} max={100} color={color} mb={3} />
|
|
|
|
<Text size="xs" color="text-gray-400" block mb={3}>{description}</Text>
|
|
|
|
<Stack gap={1}>
|
|
{breakdown.map((item, index) => (
|
|
<Stack key={index} display="flex" alignItems="center" justifyContent="between">
|
|
<Text size="xs" color="text-gray-500">{item.label}</Text>
|
|
<Text size="xs" color="text-gray-400">{item.percentage}%</Text>
|
|
</Stack>
|
|
))}
|
|
</Stack>
|
|
</Stack>
|
|
);
|
|
}
|