website refactor

apps/website/templates/ProfileLiveriesTemplate.tsx

@@ -0,0 +1,39 @@
+'use client';
+
+import React from 'react';
+import Link from 'next/link';
+import { Button } from '@/ui/Button';
+import { Plus } from 'lucide-react';
+import { routes } from '@/lib/routing/RouteConfig';
+import { Stack } from '@/ui/Stack';
+import { Heading } from '@/ui/Heading';
+import { Box } from '@/ui/Box';
+import { LiveryGallery } from '@/components/profile/LiveryGallery';
+import type { ProfileLiveriesViewData } from '@/lib/view-data/ProfileLiveriesViewData';
+
+interface ProfileLiveriesTemplateProps {
+  viewData: ProfileLiveriesViewData;
+}
+
+export function ProfileLiveriesTemplate({ viewData }: ProfileLiveriesTemplateProps) {
+  return (
+    <Stack gap={8}>
+      <Box as="header">
+        <Stack direction="row" justify="between" align="center">
+          <Heading level={1}>My Liveries</Heading>
+          <Link href={routes.protected.profileLiveryUpload}>
+            <Button variant="primary" size="sm" icon={<Plus size={16} />}>
+              Upload Livery
+            </Button>
+          </Link>
+        </Stack>
+      </Box>
+
+      <Box as="main">
+        <LiveryGallery 
+          liveries={viewData.liveries} 
+        />
+      </Box>
+    </Stack>
+  );
+}