website refactor

apps/website/client-wrapper/ProfileLiveryUploadPageClient.tsx

@@ -1,19 +1,11 @@
 'use client';
 
-import { UploadDropzone } from '@/ui/UploadDropzone';
-import { routes } from '@/lib/routing/RouteConfig';
-import { Box } from '@/ui/Box';
-import { Button } from '@/ui/Button';
-import { Card } from '@/ui/Card';
-import { Container } from '@/ui/Container';
-import { Heading } from '@/ui/Heading';
-import { MediaMetaPanel, mapMediaMetadata } from '@/ui/MediaMetaPanel';
-import { MediaPreviewCard } from '@/ui/MediaPreviewCard';
-import { Text } from '@/ui/Text';
-import Link from 'next/link';
 import { useState } from 'react';
+import { ProfileLiveryUploadTemplate } from '@/templates/ProfileLiveryUploadTemplate';
+import { ClientWrapperProps } from '@/lib/contracts/components/ComponentContracts';
+import { ViewData } from '@/lib/contracts/view-data/ViewData';
 
-export function ProfileLiveryUploadPageClient() {
+export function ProfileLiveryUploadPageClient({ viewData: initialViewData }: Partial<ClientWrapperProps<ViewData>>) {
   const [selectedFile, setSelectedFile] = useState<File | null>(null);
   const [previewUrl, setPreviewUrl] = useState<string | null>(null);
   const [isUploading, setIsUploading] = useState(false);
@@ -40,70 +32,13 @@ export function ProfileLiveryUploadPageClient() {
   };
 
   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
-                type="image"
-                src={previewUrl}
-                alt={selectedFile?.name || 'Livery preview'}
-                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>
+    <ProfileLiveryUploadTemplate
+      viewData={{}}
+      selectedFile={selectedFile}
+      previewUrl={previewUrl}
+      isUploading={isUploading}
+      onFilesSelected={handleFilesSelected}
+      onUpload={handleUpload}
+    />
   );
 }