website refactor

apps/website/components/drivers/DriverProfile.tsx

@@ -1,14 +1,18 @@
 'use client';
 
 import type { DriverViewModel } from '@/lib/view-models/DriverViewModel';
-import type { DriverProfileStatsViewModel } from '@/lib/view-models/DriverProfileViewModel';
-import Card from '../ui/Card';
-import ProfileHeader from '../profile/ProfileHeader';
-import ProfileStats from './ProfileStats';
-import CareerHighlights from './CareerHighlights';
-import DriverRankings from './DriverRankings';
-import PerformanceMetrics from './PerformanceMetrics';
-import { useDriverProfile } from "@/lib/hooks/driver/useDriverProfile";
+import { Card } from '@/ui/Card';
+import { Box } from '@/ui/Box';
+import { Text } from '@/ui/Text';
+import { Heading } from '@/ui/Heading';
+import { Stack } from '@/ui/Stack';
+import { StatCard } from '@/ui/StatCard';
+import { ProfileHeader } from '@/ui/ProfileHeader';
+import { ProfileStats } from './ProfileStats';
+import { CareerHighlights } from '@/ui/CareerHighlights';
+import { DriverRankings } from '@/ui/DriverRankings';
+import { PerformanceMetrics } from '@/ui/PerformanceMetrics';
+import { useDriverProfile } from "@/hooks/driver/useDriverProfile";
 
 interface DriverProfileProps {
   driver: DriverViewModel;
@@ -23,8 +27,8 @@ interface DriverTeamViewModel {
   };
 }
 
-export default function DriverProfile({ driver, isOwnProfile = false, onEditClick }: DriverProfileProps) {
-  const { data: profileData, isLoading } = useDriverProfile(driver.id);
+export function DriverProfile({ driver, isOwnProfile = false, onEditClick }: DriverProfileProps) {
+  const { data: profileData } = useDriverProfile(driver.id);
 
   // Extract team data from profile
   const teamData: DriverTeamViewModel | null = (() => {
@@ -32,7 +36,7 @@ export default function DriverProfile({ driver, isOwnProfile = false, onEditClic
       return null;
     }
     
-    const currentTeam = profileData.teamMemberships.find(m => m.isCurrent) || profileData.teamMemberships[0];
+    const currentTeam = profileData.teamMemberships.find((m: { isCurrent: boolean }) => m.isCurrent) || profileData.teamMemberships[0];
     if (!currentTeam) {
       return null;
     }
@@ -71,7 +75,7 @@ export default function DriverProfile({ driver, isOwnProfile = false, onEditClic
   ] : [];
 
   return (
-    <div className="space-y-6">
+    <Stack gap={6}>
       <Card>
         <ProfileHeader
           driver={driver}
@@ -86,48 +90,50 @@ export default function DriverProfile({ driver, isOwnProfile = false, onEditClic
 
       {driver.bio && (
         <Card>
-          <h3 className="text-lg font-semibold text-white mb-4">About</h3>
-          <p className="text-gray-300 leading-relaxed">{driver.bio}</p>
+          <Heading level={3} mb={4}>About</Heading>
+          <Text color="text-gray-300" leading="relaxed" block>{driver.bio}</Text>
         </Card>
       )}
 
       {driverStats && (
-        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
-          <div className="lg:col-span-2 space-y-6">
-            <Card>
-              <h3 className="text-lg font-semibold text-white mb-4">Career Statistics</h3>
-              <div className="grid grid-cols-2 gap-4">
-                <StatCard
-                  label="Rating"
-                  value={(driverStats.rating ?? 0).toString()}
-                  color="text-primary-blue"
-                />
-                <StatCard label="Total Races" value={driverStats.totalRaces.toString()} color="text-white" />
-                <StatCard label="Wins" value={driverStats.wins.toString()} color="text-green-400" />
-                <StatCard label="Podiums" value={driverStats.podiums.toString()} color="text-warning-amber" />
-              </div>
-            </Card>
+        <Box display="grid" responsiveGridCols={{ base: 1, lg: 3 }} gap={6}>
+          <Box responsiveColSpan={{ lg: 2 }}>
+            <Stack gap={6}>
+              <Card>
+                <Heading level={3} mb={4}>Career Statistics</Heading>
+                <Box display="grid" gridCols={2} gap={4}>
+                  <StatCard
+                    label="Rating"
+                    value={driverStats.rating ?? 0}
+                    variant="blue"
+                  />
+                  <StatCard label="Total Races" value={driverStats.totalRaces} variant="blue" />
+                  <StatCard label="Wins" value={driverStats.wins} variant="green" />
+                  <StatCard label="Podiums" value={driverStats.podiums} variant="orange" />
+                </Box>
+              </Card>
 
-            {performanceStats && <PerformanceMetrics stats={performanceStats} />}
-          </div>
+              {performanceStats && <PerformanceMetrics stats={performanceStats} />}
+            </Stack>
+          </Box>
 
           <DriverRankings rankings={rankings} />
-        </div>
+        </Box>
       )}
 
       {!driverStats && (
-        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
-          <Card className="lg:col-span-3">
-            <h3 className="text-lg font-semibold text-white mb-4">Career Statistics</h3>
-            <p className="text-gray-400 text-sm">
+        <Box display="grid" responsiveGridCols={{ base: 1, lg: 3 }} gap={6}>
+          <Card responsiveColSpan={{ lg: 3 }}>
+            <Heading level={3} mb={4}>Career Statistics</Heading>
+            <Text color="text-gray-400" size="sm" block>
               No statistics available yet. Compete in races to start building your record.
-            </p>
+            </Text>
           </Card>
-        </div>
+        </Box>
       )}
 
       <Card>
-        <h3 className="text-lg font-semibold text-white mb-4">Performance by Class</h3>
+        <Heading level={3} mb={4}>Performance by Class</Heading>
         {driverStats && (
           <ProfileStats
             stats={{
@@ -147,34 +153,25 @@ export default function DriverProfile({ driver, isOwnProfile = false, onEditClic
 
       <CareerHighlights />
 
-      <Card className="bg-charcoal-200/50 border-primary-blue/30">
-        <div className="flex items-center gap-3 mb-3">
-          <div className="text-2xl">🔒</div>
-          <h3 className="text-lg font-semibold text-white">Private Information</h3>
-        </div>
-        <p className="text-gray-400 text-sm">
+      <Card bg="bg-charcoal-200/50" borderColor="border-primary-blue/30">
+        <Box display="flex" alignItems="center" gap={3} mb={3}>
+          <Text size="2xl">🔒</Text>
+          <Heading level={3}>Private Information</Heading>
+        </Box>
+        <Text color="text-gray-400" size="sm" block>
           Detailed race history, settings, and preferences are only visible to the driver.
-        </p>
+        </Text>
       </Card>
 
-      <Card className="bg-charcoal-200/50 border-primary-blue/30">
-        <div className="flex items-center gap-3 mb-3">
-          <div className="text-2xl">📊</div>
-          <h3 className="text-lg font-semibold text-white">Coming Soon</h3>
-        </div>
-        <p className="text-gray-400 text-sm">
+      <Card bg="bg-charcoal-200/50" borderColor="border-primary-blue/30">
+        <Box display="flex" alignItems="center" gap={3} mb={3}>
+          <Text size="2xl">📊</Text>
+          <Heading level={3}>Coming Soon</Heading>
+        </Box>
+        <Text color="text-gray-400" size="sm" block>
           Per-car statistics, per-track performance, and head-to-head comparisons will be available in production.
-        </p>
+        </Text>
       </Card>
-    </div>
+    </Stack>
   );
 }
-
-function StatCard({ label, value, color }: { label: string; value: string; color: string }) {
-  return (
-    <div className="text-center p-4 rounded bg-deep-graphite border border-charcoal-outline">
-      <div className="text-sm text-gray-400 mb-1">{label}</div>
-      <div className={`text-2xl font-bold ${color}`}>{value}</div>
-    </div>
-  );
-}