mmintel/gridpilot.gg
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

website refactor

Browse Source
This commit is contained in:
Marc Mintel
2026-01-18 16:18:18 +01:00
parent 0b301feb61
commit 13567d51af
329 changed files with 4701 additions and 4750 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
apps/website/components/races/FinishDistributionChart.tsx
View File

@@ -1,5 +1,4 @@
import React from 'react';
import { Box } from '@/ui/Box';
import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';
@@ -24,26 +23,26 @@ export function FinishDistributionChart({ wins, podiums, topTen, total }: Finish
return (
<Stack gap={3}>
<Box h="4" rounded="full" overflow="hidden" display="flex" bg="bg-charcoal-outline">
<Stack h="4" rounded="full" overflow="hidden" display="flex" bg="bg-charcoal-outline">
{segments.map((segment) => (
<Box
<Stack
key={segment.label}
bg={segment.color}
transition
style={{ width: `${(segment.value / total) * 100}%` }}
/>
))}
</Box>
<Box display="flex" flexWrap="wrap" gap={4} justifyContent="center">
</Stack>
<Stack display="flex" flexWrap="wrap" gap={4} justifyContent="center">
{segments.map((segment) => (
<Box key={segment.label} display="flex" alignItems="center" gap={2}>
<Box w="3" h="3" rounded="full" bg={segment.color} />
<Stack key={segment.label} display="flex" alignItems="center" gap={2}>
<Stack w="3" h="3" rounded="full" bg={segment.color} />
<Text size="xs" color={segment.textColor}>
{segment.label}: {segment.value} ({((segment.value / total) * 100).toFixed(0)}%)
</Text>
</Box>
</Stack>
))}
</Box>
</Stack>
</Stack>
);
}