extract components from website

apps/website/components/profile/LiveryCard.tsx

@@ -0,0 +1,76 @@
+import Card from '@/components/ui/Card';
+import Button from '@/components/ui/Button';
+import { Car, Download, Trash2, Edit } from 'lucide-react';
+
+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 default 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>
+
+      {/* Livery Info */}
+      <div className="space-y-3">
+        <div className="flex items-center justify-between">
+          <h3 className="font-semibold text-white">{livery.carName}</h3>
+          {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">
+              Validated
+            </span>
+          ) : (
+            <span className="px-2 py-0.5 text-xs bg-warning-amber/10 text-warning-amber border border-warning-amber/30 rounded-full">
+              Pending
+            </span>
+          )}
+        </div>
+
+        <p className="text-xs text-gray-500">
+          Uploaded {new Date(livery.uploadedAt).toLocaleDateString()}
+        </p>
+
+        {/* Actions */}
+        <div className="flex gap-2 pt-2">
+          <Button
+            variant="secondary"
+            className="flex-1 px-3 py-1.5"
+            onClick={() => onEdit?.(livery.id)}
+          >
+            <Edit className="w-4 h-4 mr-1" />
+            Edit
+          </Button>
+          <Button
+            variant="secondary"
+            className="px-3 py-1.5"
+            onClick={() => onDownload?.(livery.id)}
+          >
+            <Download className="w-4 h-4" />
+          </Button>
+          <Button
+            variant="danger"
+            className="px-3 py-1.5"
+            onClick={() => onDelete?.(livery.id)}
+          >
+            <Trash2 className="w-4 h-4" />
+          </Button>
+        </div>
+      </div>
+    </Card>
+  );
+}