website refactor

2026-01-15 19:55:46 +01:00
parent 5ef149b782
commit ce7be39155
154 changed files with 436 additions and 356 deletions
--- a/apps/website/components/drivers/ProfileHeader.tsx
+++ b/apps/website/components/drivers/ProfileHeader.tsx
@@ -0,0 +1,98 @@
+
+
+import type { DriverViewModel } from '@/lib/view-models/DriverViewModel';
+import { Badge } from '@/ui/Badge';
+import { Box } from '@/ui/Box';
+import { Button } from '@/ui/Button';
+import { CountryFlag } from '@/ui/CountryFlag';
+import { DriverRatingPill } from '@/ui/DriverRatingPill';
+import { Heading } from '@/ui/Heading';
+import { Image } from '@/ui/Image';
+import { PlaceholderImage } from '@/ui/PlaceholderImage';
+import { Stack } from '@/ui/Stack';
+import { Text } from '@/ui/Text';
+
+interface ProfileHeaderProps {
+  driver: DriverViewModel;
+  rating?: number | null;
+  rank?: number | null;
+  isOwnProfile?: boolean;
+  onEditClick?: () => void;
+  teamName?: string | null;
+  teamTag?: string | null;
+}
+
+export function ProfileHeader({
+  driver,
+  rating,
+  rank,
+  isOwnProfile = false,
+  onEditClick,
+  teamName,
+  teamTag,
+}: ProfileHeaderProps) {
+  return (
+    <Box display="flex" alignItems="start" justifyContent="between">
+      <Box display="flex" alignItems="start" gap={4}>
+        <Box 
+          w="20" 
+          h="20" 
+          rounded="full" 
+          bg="bg-gradient-to-br from-primary-blue to-purple-600" 
+          overflow="hidden" 
+          display="flex" 
+          alignItems="center" 
+          justifyContent="center"
+        >
+          {driver.avatarUrl ? (
+            <Image
+              src={driver.avatarUrl}
+              alt={driver.name}
+              width={80}
+              height={80}
+              className="w-full h-full object-cover"
+            />
+          ) : (
+            <PlaceholderImage size={80} />
+          )}
+        </Box>
+        
+        <Box>
+          <Box display="flex" alignItems="center" gap={3} mb={2}>
+            <Heading level={1}>{driver.name}</Heading>
+            {driver.country && <CountryFlag countryCode={driver.country} size="lg" />}
+            {teamTag && (
+              <Badge variant="primary">
+                {teamTag}
+              </Badge>
+            )}
+          </Box>
+          
+          <Box display="flex" alignItems="center" gap={4}>
+            <Text size="sm" color="text-gray-400">iRacing ID: {driver.iracingId}</Text>
+            {teamName && (
+              <Stack direction="row" align="center" gap={2}>
+                <Text size="sm" color="text-gray-400">•</Text>
+                <Text size="sm" color="text-primary-blue">
+                  {teamTag ? `[${teamTag}] ${teamName}` : teamName}
+                </Text>
+              </Stack>
+            )}
+          </Box>
+
+          {(typeof rating === 'number' || typeof rank === 'number') && (
+            <Box mt={2}>
+              <DriverRatingPill rating={rating ?? null} rank={rank ?? null} />
+            </Box>
+          )}
+        </Box>
+      </Box>
+
+      {isOwnProfile && (
+        <Button variant="secondary" onClick={onEditClick}>
+          Edit Profile
+        </Button>
+      )}
+    </Box>
+  );
+}