website refactor

apps/website/templates/ProfileLiveryUploadTemplate.tsx

@@ -0,0 +1,104 @@
+'use client';
+
+import { UploadDropzone } from '@/ui/UploadDropzone';
+import { routes } from '@/lib/routing/RouteConfig';
+import { 
+  SharedBox, 
+  SharedButton, 
+  SharedStack, 
+  SharedText, 
+  SharedContainer,
+  SharedCard
+} from '@/components/shared/UIComponents';
+import { Heading } from '@/ui/Heading';
+import { MediaMetaPanel, mapMediaMetadata } from '@/ui/MediaMetaPanel';
+import { MediaPreviewCard } from '@/ui/MediaPreviewCard';
+import Link from 'next/link';
+import { TemplateProps } from '@/lib/contracts/components/ComponentContracts';
+import { ViewData } from '@/lib/contracts/view-data/ViewData';
+
+interface ProfileLiveryUploadTemplateProps extends TemplateProps<ViewData> {
+  selectedFile: File | null;
+  previewUrl: string | null;
+  isUploading: boolean;
+  onFilesSelected: (files: File[]) => void;
+  onUpload: () => void;
+}
+
+export function ProfileLiveryUploadTemplate({
+  selectedFile,
+  previewUrl,
+  isUploading,
+  onFilesSelected,
+  onUpload,
+}: ProfileLiveryUploadTemplateProps) {
+  return (
+    <SharedContainer size="md">
+      <SharedBox paddingY={8}>
+        <SharedBox mb={6}>
+          <Heading level={1}>Upload livery</Heading>
+          <SharedText color="text-gray-500">
+            Upload your custom car livery. Supported formats: .png, .jpg, .tga
+          </SharedText>
+        </SharedBox>
+
+        <SharedBox display="grid" responsiveGridCols={{ base: 1, md: 2 }} gap={6}>
+          <SharedBox>
+            <SharedCard>
+              <UploadDropzone
+                onFilesSelected={onFilesSelected}
+                accept=".png,.jpg,.jpeg,.tga"
+                maxSize={10 * 1024 * 1024} // 10MB
+                isLoading={isUploading}
+              />
+              
+              <SharedBox mt={6} display="flex" justifyContent="end" gap={3}>
+                <Link href={routes.protected.profileLiveries}>
+                  <SharedButton variant="ghost">Cancel</SharedButton>
+                </Link>
+                <SharedButton 
+                  variant="primary" 
+                  disabled={!selectedFile || isUploading}
+                  onClick={onUpload}
+                  isLoading={isUploading}
+                >
+                  Upload Livery
+                </SharedButton>
+              </SharedBox>
+            </SharedCard>
+          </SharedBox>
+
+          <SharedBox>
+            {previewUrl ? (
+              <SharedBox 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(),
+                  })}
+                />
+              </SharedBox>
+            ) : (
+              <SharedCard center p={12}>
+                <SharedText color="text-gray-500" align="center">
+                  Select a file to see preview and details
+                </SharedText>
+              </SharedCard>
+            )}
+          </SharedBox>
+        </SharedBox>
+      </SharedBox>
+    </SharedContainer>
+  );
+}