website refactor

2026-01-18 13:26:35 +01:00
parent 350c78504d
commit 0b301feb61
225 changed files with 1678 additions and 26666 deletions
--- a/apps/website/components/drivers/DriverSummaryPill.tsx
+++ b/apps/website/components/drivers/DriverSummaryPill.tsx
@@ -0,0 +1,137 @@
+
+
+import React from 'react';
+import { Box } from '@/ui/Box';
+import { Image } from '@/ui/Image';
+import { Link } from '@/ui/Link';
+import { PlaceholderImage } from '@/ui/PlaceholderImage';
+import { Stack } from '@/ui/Stack';
+import { Text } from '@/ui/Text';
+
+interface DriverSummaryPillProps {
+  name: string;
+  avatarSrc?: string | null;
+  rating?: number | null;
+  rank?: number | null;
+  onClick?: () => void;
+  href?: string;
+  ratingComponent?: React.ReactNode;
+}
+
+export function DriverSummaryPill({
+  name,
+  avatarSrc,
+  onClick,
+  href,
+  ratingComponent,
+}: DriverSummaryPillProps) {
+  const content = (
+    <>
+      <Box 
+        w="8" 
+        h="8" 
+        rounded="full" 
+        overflow="hidden" 
+        bg="bg-charcoal-outline" 
+        display="flex" 
+        alignItems="center" 
+        justifyContent="center" 
+        border 
+        borderColor="border-charcoal-outline/80"
+      >
+        {avatarSrc ? (
+          <Image
+            src={avatarSrc}
+            alt={name}
+            width={32}
+            height={32}
+            objectFit="cover"
+            fill
+          />
+        ) : (
+          <PlaceholderImage size={32} />
+        )}
+      </Box>
+
+      <Stack direction="col" align="start" justify="center">
+        <Text 
+          size="xs" 
+          weight="semibold" 
+          color="text-white" 
+          truncate 
+          block
+          style={{ maxWidth: '140px' }}
+        >
+          {name}
+        </Text>
+        {ratingComponent}
+      </Stack>
+    </>
+  );
+
+  if (href) {
+    return (
+      <Link 
+        href={href} 
+        block 
+        display="flex"
+        alignItems="center"
+        gap={3}
+        rounded="full"
+        bg="bg-iron-gray/70"
+        px={3}
+        py={1.5}
+        border
+        borderColor="border-charcoal-outline/80"
+        shadow="0 0 18px rgba(0,0,0,0.45)"
+        transition
+        hoverBorderColor="primary-blue/60"
+        className="hover:bg-iron-gray"
+      >
+        {content}
+      </Link>
+    );
+  }
+
+  if (onClick) {
+    return (
+      <Box 
+        as="button" 
+        type="button" 
+        onClick={onClick} 
+        cursor="pointer"
+        display="flex"
+        alignItems="center"
+        gap={3}
+        rounded="full"
+        bg="bg-iron-gray/70"
+        px={3}
+        py={1.5}
+        border
+        borderColor="border-charcoal-outline/80"
+        shadow="0 0 18px rgba(0,0,0,0.45)"
+        transition
+        hoverBorderColor="primary-blue/60"
+        className="hover:bg-iron-gray"
+      >
+        {content}
+      </Box>
+    );
+  }
+
+  return (
+    <Box 
+      display="flex"
+      alignItems="center"
+      gap={3}
+      rounded="full"
+      bg="bg-iron-gray/70"
+      px={3}
+      py={1.5}
+      border
+      borderColor="border-charcoal-outline/80"
+    >
+      {content}
+    </Box>
+  );
+}