website refactor

apps/website/components/profile/LiveryGallery.tsx

@@ -0,0 +1,28 @@
+'use client';
+
+import React from 'react';
+import { Grid } from '@/ui/Grid';
+import { LiveryCard } from '@/ui/LiveryCard';
+import { ProfileSection } from './ProfileSection';
+import { ProfileLiveryViewData } from '@/lib/view-data/ProfileLiveriesViewData';
+
+interface LiveryGalleryProps {
+  liveries: ProfileLiveryViewData[];
+  action?: React.ReactNode;
+}
+
+export function LiveryGallery({ liveries, action }: LiveryGalleryProps) {
+  return (
+    <ProfileSection 
+      title="My Liveries" 
+      description="Manage your custom car liveries and designs."
+      action={action}
+    >
+      <Grid cols={3} gap={6}>
+        {liveries.map((livery) => (
+          <LiveryCard key={livery.id} livery={livery} />
+        ))}
+      </Grid>
+    </ProfileSection>
+  );
+}