website refactor

apps/website/templates/DriverProfileTemplate.tsx

@@ -1,26 +1,26 @@
 'use client';
 
-import { RatingBreakdown } from '@/ui/RatingBreakdown';
-import { Breadcrumbs } from '@/ui/Breadcrumbs';
-import { AchievementGrid } from '@/components/achievements/AchievementGrid';
-import { CareerStats } from '@/ui/CareerStats';
-import { FriendsPreview } from '@/components/social/FriendsPreview';
-import { PerformanceOverview } from '@/ui/PerformanceOverview';
-import { ProfileBio } from '@/ui/ProfileBio';
-import { ProfileHero } from '@/components/drivers/ProfileHero';
-import { ProfileTabs, type ProfileTab } from '@/ui/ProfileTabs';
-import { RacingProfile } from '@/ui/RacingProfile';
-import { TeamMembershipGrid } from '@/ui/TeamMembershipGrid';
+import React from 'react';
+import { ArrowLeft } from 'lucide-react';
+import { Container } from '@/ui/Container';
+import { Stack } from '@/ui/Stack';
 import { Box } from '@/ui/Box';
 import { Button } from '@/ui/Button';
-import { Container } from '@/ui/Container';
+import { Breadcrumbs } from '@/ui/Breadcrumbs';
 import { LoadingSpinner } from '@/ui/LoadingSpinner';
-import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
-import {
-  ArrowLeft,
-} from 'lucide-react';
-import React from 'react';
+import { AchievementGrid } from '@/components/achievements/AchievementGrid';
+import { FriendsPreview } from '@/components/social/FriendsPreview';
+import { TeamMembershipGrid } from '@/ui/TeamMembershipGrid';
+import { RatingBreakdown } from '@/ui/RatingBreakdown';
+
+import { DriverProfileHeader } from '@/components/drivers/DriverProfileHeader';
+import { DriverStatsPanel } from '@/components/drivers/DriverStatsPanel';
+import { DriverProfileTabs, type ProfileTab } from '@/components/drivers/DriverProfileTabs';
+import { DriverPerformanceOverview } from '@/components/drivers/DriverPerformanceOverview';
+import { DriverRacingProfile } from '@/components/drivers/DriverRacingProfile';
+import { CareerStats } from '@/ui/CareerStats';
+
 import type { DriverProfileViewData } from '@/lib/types/view-data/DriverProfileViewData';
 
 interface DriverProfileTemplateProps {
@@ -74,48 +74,57 @@ export function DriverProfileTemplate({
 
   const { currentDriver, stats, teamMemberships, socialSummary, extendedProfile } = viewData;
 
+  const careerStats = stats ? [
+    { label: 'Rating', value: stats.rating || 0, color: 'text-primary-blue' },
+    { label: 'Wins', value: stats.wins, color: 'text-performance-green' },
+    { label: 'Podiums', value: stats.podiums, color: 'text-warning-amber' },
+    { label: 'Total Races', value: stats.totalRaces },
+    { label: 'Avg Finish', value: stats.avgFinish?.toFixed(1) || '-', subValue: 'POS' },
+    { label: 'Consistency', value: stats.consistency ? `${stats.consistency}%` : '-' },
+  ] : [];
+
   return (
     <Container size="lg" py={8}>
       <Stack gap={6}>
-        {/* Back Navigation */}
-        <Box>
-          <Button
-            variant="secondary"
-            onClick={onBackClick}
-            icon={<ArrowLeft size={4} />}
-          >
-            Back to Drivers
-          </Button>
-        </Box>
-
-        {/* Breadcrumb */}
-        <Breadcrumbs
-          items={[
-            { label: 'Home', href: '/' },
-            { label: 'Drivers', href: '/drivers' },
-            { label: currentDriver.name },
-          ]}
-        />
+        {/* Back Navigation & Breadcrumbs */}
+        <Stack gap={4}>
+          <Box display="flex" alignItems="center" justifyContent="between">
+            <Button
+              variant="secondary"
+              onClick={onBackClick}
+              icon={<ArrowLeft size={16} />}
+            >
+              Back to Drivers
+            </Button>
+          </Box>
+          <Breadcrumbs
+            items={[
+              { label: 'Home', href: '/' },
+              { label: 'Drivers', href: '/drivers' },
+              { label: currentDriver.name },
+            ]}
+          />
+        </Stack>
 
         {/* Sponsor Insights Card */}
         {isSponsorMode && sponsorInsights}
 
         {/* Hero Header Section */}
-        <ProfileHero 
-          driver={{
-            ...currentDriver,
-            iracingId: currentDriver.iracingId || 0,
-          }}
-          stats={stats ? { rating: stats.rating || 0 } : null}
-          globalRank={currentDriver.globalRank || 0}
-          timezone={extendedProfile?.timezone || 'UTC'}
-          socialHandles={extendedProfile?.socialHandles || []}
-          onAddFriend={onAddFriend}
+        <DriverProfileHeader
+          name={currentDriver.name}
+          avatarUrl={currentDriver.avatarUrl}
+          nationality={currentDriver.country}
+          rating={stats?.rating || 0}
+          globalRank={currentDriver.globalRank ?? undefined}
+          bio={currentDriver.bio}
           friendRequestSent={friendRequestSent}
+          onAddFriend={onAddFriend}
         />
 
-        {/* Bio Section */}
-        {currentDriver.bio && <ProfileBio bio={currentDriver.bio} />}
+        {/* Stats Grid */}
+        {careerStats.length > 0 && (
+          <DriverStatsPanel stats={careerStats} />
+        )}
 
         {/* Team Memberships */}
         {teamMemberships.length > 0 && (
@@ -128,31 +137,28 @@ export function DriverProfileTemplate({
           />
         )}
 
-        {/* Performance Overview */}
-        {stats && (
-          <PerformanceOverview 
-            stats={{
-              wins: stats.wins,
-              podiums: stats.podiums,
-              totalRaces: stats.totalRaces,
-              consistency: stats.consistency,
-              dnfs: stats.dnfs,
-              bestFinish: stats.bestFinish || 0,
-              avgFinish: stats.avgFinish
-            }} 
-          />
-        )}
-
         {/* Tab Navigation */}
-        <ProfileTabs activeTab={activeTab} onTabChange={onTabChange} />
+        <DriverProfileTabs activeTab={activeTab} onTabChange={onTabChange} />
 
         {/* Tab Content */}
         {activeTab === 'overview' && (
           <Stack gap={6}>
-            <CareerStats stats={stats || { totalRaces: 0, wins: 0, podiums: 0, consistency: 0 }} />
+            {stats && (
+              <DriverPerformanceOverview 
+                stats={{
+                  wins: stats.wins,
+                  podiums: stats.podiums,
+                  totalRaces: stats.totalRaces,
+                  consistency: stats.consistency || 0,
+                  dnfs: stats.dnfs,
+                  bestFinish: stats.bestFinish || 0,
+                  avgFinish: stats.avgFinish || 0
+                }} 
+              />
+            )}
             
             {extendedProfile && (
-              <RacingProfile 
+              <DriverRacingProfile 
                 racingStyle={extendedProfile.racingStyle}
                 favoriteTrack={extendedProfile.favoriteTrack}
                 favoriteCar={extendedProfile.favoriteCar}
@@ -177,10 +183,21 @@ export function DriverProfileTemplate({
           </Stack>
         )}
 
-        {activeTab === 'stats' && !stats && (
-          <Stack align="center" py={12} gap={4}>
-            <Text color="text-gray-400">No statistics available yet</Text>
-            <Text size="sm" color="text-gray-500">This driver hasn&apos;t completed any races yet</Text>
+        {activeTab === 'stats' && (
+          <Stack gap={6}>
+            {stats ? (
+              <CareerStats stats={{
+                totalRaces: stats.totalRaces,
+                wins: stats.wins,
+                podiums: stats.podiums,
+                consistency: stats.consistency
+              }} />
+            ) : (
+              <Box display="flex" flexDirection="col" alignItems="center" justifyContent="center" py={12} gap={4} rounded="2xl" border borderColor="border-charcoal-outline" bg="bg-deep-charcoal/30">
+                <Text color="text-gray-400">No statistics available yet</Text>
+                <Text size="sm" color="text-gray-500">This driver hasn&apos;t completed any races yet</Text>
+              </Box>
+            )}
           </Stack>
         )}