wip

apps/website/app/profile/liveries/page.tsx

@@ -1,23 +1,55 @@
 import Link from 'next/link';
-import Button from '@/ui/Button';
-import Card from '@/ui/Card';
-import Container from '@/ui/Container';
-import Heading from '@/ui/Heading';
+import { Button } from '@/ui/Button';
+import { Card } from '@/ui/Card';
+import { Container } from '@/ui/Container';
+import { Heading } from '@/ui/Heading';
+import { Grid } from '@/ui/Grid';
 import { routes } from '@/lib/routing/RouteConfig';
+import { LiveryCard } from '@/components/profile/LiveryCard';
 
 export default async function ProfileLiveriesPage() {
+  const mockLiveries = [
+    {
+      id: '1',
+      carId: 'gt3-r',
+      carName: 'Porsche 911 GT3 R (992)',
+      thumbnailUrl: '',
+      uploadedAt: new Date(),
+      isValidated: true,
+    },
+    {
+      id: '2',
+      carId: 'f3',
+      carName: 'Dallara F3',
+      thumbnailUrl: '',
+      uploadedAt: new Date(),
+      isValidated: false,
+    }
+  ];
+
   return (
-    <Container size="md">
-      <Heading level={1}>Liveries</Heading>
-      <Card>
-        <p>Livery management is currently unavailable.</p>
-        <Link href={routes.protected.profile}>
-          <Button variant="secondary">Back to profile</Button>
-        </Link>
+    <Container size="lg" py={8}>
+      <div className="flex items-center justify-between mb-8">
+        <div>
+          <Heading level={1}>My Liveries</Heading>
+          <p className="text-gray-400 mt-1">Manage your custom car liveries</p>
+        </div>
         <Link href={routes.protected.profileLiveryUpload}>
           <Button variant="primary">Upload livery</Button>
         </Link>
-      </Card>
+      </div>
+
+      <Grid cols={3} gap={6}>
+        {mockLiveries.map((livery) => (
+          <LiveryCard key={livery.id} livery={livery} />
+        ))}
+      </Grid>
+
+      <div className="mt-12">
+        <Link href={routes.protected.profile}>
+          <Button variant="secondary">Back to profile</Button>
+        </Link>
+      </div>
     </Container>
   );
 }