wip

apps/website/components/profile/LiveryCard.tsx

@@ -1,6 +1,12 @@
-import Card from '@/ui/Card';
-import Button from '@/ui/Button';
+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;
@@ -18,59 +24,64 @@ interface LiveryCardProps {
   onDelete?: (id: string) => void;
 }
 
-export default function LiveryCard({ livery, onEdit, onDownload, onDelete }: LiveryCardProps) {
+export function LiveryCard({ livery, onEdit, onDownload, onDelete }: LiveryCardProps) {
   return (
     <Card className="overflow-hidden hover:border-primary-blue/50 transition-colors">
       {/* Livery Preview */}
-      <div className="aspect-video bg-deep-graphite rounded-lg mb-4 flex items-center justify-center border border-charcoal-outline">
-        <Car className="w-16 h-16 text-gray-600" />
-      </div>
+      <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 */}
-      <div className="space-y-3">
-        <div className="flex items-center justify-between">
-          <h3 className="font-semibold text-white">{livery.carName}</h3>
+      <Stack gap={3}>
+        <Stack direction="row" align="center" justify="between">
+          <Heading level={3}>{livery.carName}</Heading>
           {livery.isValidated ? (
-            <span className="px-2 py-0.5 text-xs bg-performance-green/10 text-performance-green border border-performance-green/30 rounded-full">
+            <Badge variant="success">
               Validated
-            </span>
+            </Badge>
           ) : (
-            <span className="px-2 py-0.5 text-xs bg-warning-amber/10 text-warning-amber border border-warning-amber/30 rounded-full">
+            <Badge variant="warning">
               Pending
-            </span>
+            </Badge>
           )}
-        </div>
+        </Stack>
 
-        <p className="text-xs text-gray-500">
+        <Text size="xs" color="text-gray-500">
           Uploaded {new Date(livery.uploadedAt).toLocaleDateString()}
-        </p>
+        </Text>
 
         {/* Actions */}
-        <div className="flex gap-2 pt-2">
+        <Stack direction="row" gap={2} pt={2}>
           <Button
             variant="secondary"
-            className="flex-1 px-3 py-1.5"
+            size="sm"
+            fullWidth
             onClick={() => onEdit?.(livery.id)}
+            icon={<Icon icon={Edit} size={4} />}
           >
-            <Edit className="w-4 h-4 mr-1" />
             Edit
           </Button>
           <Button
             variant="secondary"
-            className="px-3 py-1.5"
+            size="sm"
             onClick={() => onDownload?.(livery.id)}
+            icon={<Icon icon={Download} size={4} />}
+            aria-label="Download"
           >
-            <Download className="w-4 h-4" />
+            {null}
           </Button>
           <Button
             variant="danger"
-            className="px-3 py-1.5"
+            size="sm"
             onClick={() => onDelete?.(livery.id)}
+            icon={<Icon icon={Trash2} size={4} />}
+            aria-label="Delete"
           >
-            <Trash2 className="w-4 h-4" />
+            {null}
           </Button>
-        </div>
-      </div>
+        </Stack>
+      </Stack>
     </Card>
   );
-}
+}