website refactor

apps/website/components/drivers/LiveryCard.tsx

@@ -0,0 +1,87 @@
+import { Card } from '@/ui/Card';
+import { Button } from '@/ui/Button';
+import { Car, Download, Trash2, Edit } from 'lucide-react';
+import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
+import { Text } from '@/ui/Text';
+import { Heading } from '@/ui/Heading';
+import { Badge } from '@/ui/Badge';
+import { Icon } from '@/ui/Icon';
+
+interface DriverLiveryItem {
+  id: string;
+  carId: string;
+  carName: string;
+  thumbnailUrl: string;
+  uploadedAt: Date;
+  isValidated: boolean;
+}
+
+interface LiveryCardProps {
+  livery: DriverLiveryItem;
+  onEdit?: (id: string) => void;
+  onDownload?: (id: string) => void;
+  onDelete?: (id: string) => void;
+}
+
+export function LiveryCard({ livery, onEdit, onDownload, onDelete }: LiveryCardProps) {
+  return (
+    <Card className="overflow-hidden hover:border-primary-blue/50 transition-colors">
+      {/* Livery Preview */}
+      <Box height={48} backgroundColor="deep-graphite" rounded="lg" mb={4} display="flex" center border borderColor="charcoal-outline">
+        <Icon icon={Car} size={16} color="text-gray-600" />
+      </Box>
+
+      {/* Livery Info */}
+      <Stack gap={3}>
+        <Stack direction="row" align="center" justify="between">
+          <Heading level={3}>{livery.carName}</Heading>
+          {livery.isValidated ? (
+            <Badge variant="success">
+              Validated
+            </Badge>
+          ) : (
+            <Badge variant="warning">
+              Pending
+            </Badge>
+          )}
+        </Stack>
+
+        <Text size="xs" color="text-gray-500">
+          Uploaded {new Date(livery.uploadedAt).toLocaleDateString()}
+        </Text>
+
+        {/* Actions */}
+        <Stack direction="row" gap={2} pt={2}>
+          <Button
+            variant="secondary"
+            size="sm"
+            fullWidth
+            onClick={() => onEdit?.(livery.id)}
+            icon={<Icon icon={Edit} size={4} />}
+          >
+            Edit
+          </Button>
+          <Button
+            variant="secondary"
+            size="sm"
+            onClick={() => onDownload?.(livery.id)}
+            icon={<Icon icon={Download} size={4} />}
+            aria-label="Download"
+          >
+            {null}
+          </Button>
+          <Button
+            variant="danger"
+            size="sm"
+            onClick={() => onDelete?.(livery.id)}
+            icon={<Icon icon={Trash2} size={4} />}
+            aria-label="Delete"
+          >
+            {null}
+          </Button>
+        </Stack>
+      </Stack>
+    </Card>
+  );
+}