87 lines
2.4 KiB
TypeScript
87 lines
2.4 KiB
TypeScript
import { Badge } from '@/ui/Badge';
|
|
import { Button } from '@/ui/Button';
|
|
import { Card } from '@/ui/Card';
|
|
import { Heading } from '@/ui/Heading';
|
|
import { Icon } from '@/ui/Icon';
|
|
import { Stack } from '@/ui/primitives/Stack';
|
|
import { Text } from '@/ui/Text';
|
|
import { Car, Download, Edit, Trash2 } from 'lucide-react';
|
|
|
|
interface DriverLiveryItem {
|
|
id: string;
|
|
carId: string;
|
|
carName: string;
|
|
thumbnailUrl: string;
|
|
uploadedAt: Date;
|
|
isValidated: boolean;
|
|
}
|
|
|
|
interface LiveryCardProps {
|
|
livery: DriverLiveryItem;
|
|
onEdit?: (id: string) => void;
|
|
onDownload?: (id: string) => void;
|
|
onDelete?: (id: string) => void;
|
|
}
|
|
|
|
export function LiveryCard({ livery, onEdit, onDownload, onDelete }: LiveryCardProps) {
|
|
return (
|
|
<Card className="overflow-hidden hover:border-primary-blue/50 transition-colors">
|
|
{/* Livery Preview */}
|
|
<Stack height={48} backgroundColor="deep-graphite" rounded="lg" mb={4} display="flex" center border borderColor="charcoal-outline">
|
|
<Icon icon={Car} size={16} color="text-gray-600" />
|
|
</Stack>
|
|
|
|
{/* Livery Info */}
|
|
<Stack gap={3}>
|
|
<Stack direction="row" align="center" justify="between">
|
|
<Heading level={3}>{livery.carName}</Heading>
|
|
{livery.isValidated ? (
|
|
<Badge variant="success">
|
|
Validated
|
|
</Badge>
|
|
) : (
|
|
<Badge variant="warning">
|
|
Pending
|
|
</Badge>
|
|
)}
|
|
</Stack>
|
|
|
|
<Text size="xs" color="text-gray-500">
|
|
Uploaded {new Date(livery.uploadedAt).toLocaleDateString()}
|
|
</Text>
|
|
|
|
{/* Actions */}
|
|
<Stack direction="row" gap={2} pt={2}>
|
|
<Button
|
|
variant="secondary"
|
|
size="sm"
|
|
fullWidth
|
|
onClick={() => onEdit?.(livery.id)}
|
|
icon={<Icon icon={Edit} size={4} />}
|
|
>
|
|
Edit
|
|
</Button>
|
|
<Button
|
|
variant="secondary"
|
|
size="sm"
|
|
onClick={() => onDownload?.(livery.id)}
|
|
icon={<Icon icon={Download} size={4} />}
|
|
aria-label="Download"
|
|
>
|
|
{null}
|
|
</Button>
|
|
<Button
|
|
variant="danger"
|
|
size="sm"
|
|
onClick={() => onDelete?.(livery.id)}
|
|
icon={<Icon icon={Trash2} size={4} />}
|
|
aria-label="Delete"
|
|
>
|
|
{null}
|
|
</Button>
|
|
</Stack>
|
|
</Stack>
|
|
</Card>
|
|
);
|
|
}
|