website refactor

apps/website/components/profile/PerformanceOverview.tsx

@@ -0,0 +1,113 @@
+'use client';
+
+import React from 'react';
+import { Activity, TrendingUp, Target, BarChart3 } from 'lucide-react';
+import { Card } from '@/ui/Card';
+import { Heading } from '@/ui/Heading';
+import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
+import { Text } from '@/ui/Text';
+import { Grid } from '@/ui/Grid';
+import { GridItem } from '@/ui/GridItem';
+import { Icon } from '@/ui/Icon';
+import { CircularProgress } from '@/components/drivers/CircularProgress';
+import { HorizontalBarChart } from '@/components/drivers/HorizontalBarChart';
+
+interface PerformanceOverviewProps {
+  stats: {
+    wins: number;
+    podiums: number;
+    totalRaces: number;
+    consistency: number | null;
+    dnfs: number;
+    bestFinish: number;
+    avgFinish: number | null;
+  };
+}
+
+export function PerformanceOverview({ stats }: PerformanceOverviewProps) {
+  return (
+    <Card>
+      <Box mb={6}>
+        <Heading level={2} icon={<Icon icon={Activity} size={5} color="#00f2ff" />}>
+          Performance Overview
+        </Heading>
+      </Box>
+      <Grid cols={12} gap={8}>
+        <GridItem colSpan={12} lgSpan={6}>
+          <Stack align="center" gap={4}>
+            <Stack direction="row" gap={6}>
+              <CircularProgress
+                value={stats.wins}
+                max={stats.totalRaces}
+                label="Win Rate"
+                color="#10b981"
+              />
+              <CircularProgress
+                value={stats.podiums}
+                max={stats.totalRaces}
+                label="Podium Rate"
+                color="#f59e0b"
+              />
+            </Stack>
+            <Stack direction="row" gap={6}>
+              <CircularProgress
+                value={stats.consistency ?? 0}
+                max={100}
+                label="Consistency"
+                color="#3b82f6"
+              />
+              <CircularProgress
+                value={stats.totalRaces - stats.dnfs}
+                max={stats.totalRaces}
+                label="Finish Rate"
+                color="#00f2ff"
+              />
+            </Stack>
+          </Stack>
+        </GridItem>
+
+        <GridItem colSpan={12} lgSpan={6}>
+          <Box mb={4}>
+            <Heading level={3} icon={<Icon icon={BarChart3} size={4} color="#9ca3af" />}>
+              Results Breakdown
+            </Heading>
+          </Box>
+          <HorizontalBarChart
+            data={[
+              { label: 'Wins', value: stats.wins, color: 'bg-performance-green' },
+              { label: 'Podiums (2nd-3rd)', value: stats.podiums - stats.wins, color: 'bg-warning-amber' },
+              { label: 'DNFs', value: stats.dnfs, color: 'bg-red-500' },
+            ]}
+            maxValue={stats.totalRaces}
+          />
+
+          <Box mt={6}>
+            <Grid cols={2} gap={4}>
+              <Box p={4} style={{ backgroundColor: '#0f1115', borderRadius: '0.75rem', border: '1px solid #262626' }}>
+                <Stack gap={2}>
+                  <Stack direction="row" align="center" gap={2}>
+                    <Icon icon={TrendingUp} size={4} color="#10b981" />
+                    <Text size="xs" color="text-gray-500" style={{ textTransform: 'uppercase' }}>Best Finish</Text>
+                  </Stack>
+                  <Text size="2xl" weight="bold" color="text-performance-green">P{stats.bestFinish}</Text>
+                </Stack>
+              </Box>
+              <Box p={4} style={{ backgroundColor: '#0f1115', borderRadius: '0.75rem', border: '1px solid #262626' }}>
+                <Stack gap={2}>
+                  <Stack direction="row" align="center" gap={2}>
+                    <Icon icon={Target} size={4} color="#3b82f6" />
+                    <Text size="xs" color="text-gray-500" style={{ textTransform: 'uppercase' }}>Avg Finish</Text>
+                  </Stack>
+                  <Text size="2xl" weight="bold" color="text-primary-blue">
+                    P{(stats.avgFinish ?? 0).toFixed(1)}
+                  </Text>
+                </Stack>
+              </Box>
+            </Grid>
+          </Box>
+        </GridItem>
+      </Grid>
+    </Card>
+  );
+}