website refactor

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

@@ -1,13 +1,4 @@
-import Link from 'next/link';
-import { Button } from '@/ui/Button';
-import { Container } from '@/ui/Container';
-import { Heading } from '@/ui/Heading';
-import { Grid } from '@/ui/Grid';
-import { routes } from '@/lib/routing/RouteConfig';
-import { LiveryCard } from '@/ui/LiveryCard';
-import { Stack } from '@/ui/Stack';
-import { Box } from '@/ui/Box';
-import { Text } from '@/ui/Text';
+import { ProfileLiveriesTemplate } from '@/templates/ProfileLiveriesTemplate';
 
 export default async function ProfileLiveriesPage() {
   const mockLiveries = [
@@ -29,29 +20,5 @@ export default async function ProfileLiveriesPage() {
     }
   ];
 
-  return (
-    <Container size="lg" py={8}>
-      <Stack direction="row" align="center" justify="between" mb={8}>
-        <Box>
-          <Heading level={1}>My Liveries</Heading>
-          <Text color="text-gray-400" mt={1} block>Manage your custom car liveries</Text>
-        </Box>
-        <Link href={routes.protected.profileLiveryUpload}>
-          <Button variant="primary">Upload livery</Button>
-        </Link>
-      </Stack>
-
-      <Grid cols={3} gap={6}>
-        {mockLiveries.map((livery) => (
-          <LiveryCard key={livery.id} livery={livery} />
-        ))}
-      </Grid>
-
-      <Box mt={12}>
-        <Link href={routes.protected.profile}>
-          <Button variant="secondary">Back to profile</Button>
-        </Link>
-      </Box>
-    </Container>
-  );
+  return <ProfileLiveriesTemplate viewData={{ liveries: mockLiveries }} />;
 }

apps/website/app/profile/liveries/upload/ProfileLiveryUploadPageClient.tsx

@@ -0,0 +1,107 @@
+'use client';
+
+import React, { useState } from 'react';
+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 { Text } from '@/ui/Text';
+import { Box } from '@/ui/Box';
+import { routes } from '@/lib/routing/RouteConfig';
+import { UploadDropzone } from '@/components/media/UploadDropzone';
+import { MediaPreviewCard } from '@/ui/MediaPreviewCard';
+import { MediaMetaPanel, mapMediaMetadata } from '@/ui/MediaMetaPanel';
+
+export function ProfileLiveryUploadPageClient() {
+  const [selectedFile, setSelectedFile] = useState<File | null>(null);
+  const [previewUrl, setPreviewUrl] = useState<string | null>(null);
+  const [isUploading, setIsUploading] = useState(false);
+
+  const handleFilesSelected = (files: File[]) => {
+    if (files.length > 0) {
+      const file = files[0];
+      setSelectedFile(file);
+      const url = URL.createObjectURL(file);
+      setPreviewUrl(url);
+    } else {
+      setSelectedFile(null);
+      setPreviewUrl(null);
+    }
+  };
+
+  const handleUpload = async () => {
+    if (!selectedFile) return;
+    setIsUploading(true);
+    // Mock upload delay
+    await new Promise(resolve => setTimeout(resolve, 2000));
+    setIsUploading(false);
+    alert('Livery uploaded successfully! (Mock)');
+  };
+
+  return (
+    <Container size="md">
+      <Box mb={6}>
+        <Heading level={1}>Upload livery</Heading>
+        <Text color="text-gray-500">
+          Upload your custom car livery. Supported formats: .png, .jpg, .tga
+        </Text>
+      </Box>
+
+      <Box display="grid" responsiveGridCols={{ base: 1, md: 2 }} gap={6}>
+        <Box>
+          <Card>
+            <UploadDropzone
+              onFilesSelected={handleFilesSelected}
+              accept=".png,.jpg,.jpeg,.tga"
+              maxSize={10 * 1024 * 1024} // 10MB
+              isLoading={isUploading}
+            />
+            
+            <Box mt={6} display="flex" justifyContent="end" gap={3}>
+              <Link href={routes.protected.profileLiveries}>
+                <Button variant="ghost">Cancel</Button>
+              </Link>
+              <Button 
+                variant="primary" 
+                disabled={!selectedFile || isUploading}
+                onClick={handleUpload}
+                isLoading={isUploading}
+              >
+                Upload Livery
+              </Button>
+            </Box>
+          </Card>
+        </Box>
+
+        <Box>
+          {previewUrl ? (
+            <Box display="flex" flexDirection="col" gap={6}>
+              <MediaPreviewCard
+                src={previewUrl}
+                title={selectedFile?.name}
+                subtitle="Preview"
+                aspectRatio="16/9"
+              />
+              
+              <MediaMetaPanel
+                items={mapMediaMetadata({
+                  filename: selectedFile?.name,
+                  size: selectedFile?.size,
+                  contentType: selectedFile?.type || 'image/tga',
+                  createdAt: new Date(),
+                })}
+              />
+            </Box>
+          ) : (
+            <Card center p={12}>
+              <Text color="text-gray-500" align="center">
+                Select a file to see preview and details
+              </Text>
+            </Card>
+          )}
+        </Box>
+      </Box>
+    </Container>
+  );
+}

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

@@ -1,21 +1,6 @@
-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 { Text } from '@/ui/Text';
-import { routes } from '@/lib/routing/RouteConfig';
+import React from 'react';
+import { ProfileLiveryUploadPageClient } from './ProfileLiveryUploadPageClient';
 
 export default async function ProfileLiveryUploadPage() {
-  return (
-    <Container size="md">
-      <Heading level={1}>Upload livery</Heading>
-      <Card>
-        <Text block mb={4}>Livery upload is currently unavailable.</Text>
-        <Link href={routes.protected.profileLiveries}>
-          <Button variant="secondary">Back to liveries</Button>
-        </Link>
-      </Card>
-    </Container>
-  );
+  return <ProfileLiveryUploadPageClient />;
 }