108 lines
3.3 KiB
TypeScript
108 lines
3.3 KiB
TypeScript
'use client';
|
|
|
|
import { UploadDropzone } from '@/components/media/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';
|
|
|
|
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>
|
|
);
|
|
}
|