76 lines
2.4 KiB
TypeScript
76 lines
2.4 KiB
TypeScript
import Card from '@/components/ui/Card';
|
|
import Button from '@/components/ui/Button';
|
|
import { Car, Download, Trash2, Edit } 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 default function LiveryCard({ livery, onEdit, onDownload, onDelete }: LiveryCardProps) {
|
|
return (
|
|
<Card className="overflow-hidden hover:border-primary-blue/50 transition-colors">
|
|
{/* Livery Preview */}
|
|
<div className="aspect-video bg-deep-graphite rounded-lg mb-4 flex items-center justify-center border border-charcoal-outline">
|
|
<Car className="w-16 h-16 text-gray-600" />
|
|
</div>
|
|
|
|
{/* Livery Info */}
|
|
<div className="space-y-3">
|
|
<div className="flex items-center justify-between">
|
|
<h3 className="font-semibold text-white">{livery.carName}</h3>
|
|
{livery.isValidated ? (
|
|
<span className="px-2 py-0.5 text-xs bg-performance-green/10 text-performance-green border border-performance-green/30 rounded-full">
|
|
Validated
|
|
</span>
|
|
) : (
|
|
<span className="px-2 py-0.5 text-xs bg-warning-amber/10 text-warning-amber border border-warning-amber/30 rounded-full">
|
|
Pending
|
|
</span>
|
|
)}
|
|
</div>
|
|
|
|
<p className="text-xs text-gray-500">
|
|
Uploaded {new Date(livery.uploadedAt).toLocaleDateString()}
|
|
</p>
|
|
|
|
{/* Actions */}
|
|
<div className="flex gap-2 pt-2">
|
|
<Button
|
|
variant="secondary"
|
|
className="flex-1 px-3 py-1.5"
|
|
onClick={() => onEdit?.(livery.id)}
|
|
>
|
|
<Edit className="w-4 h-4 mr-1" />
|
|
Edit
|
|
</Button>
|
|
<Button
|
|
variant="secondary"
|
|
className="px-3 py-1.5"
|
|
onClick={() => onDownload?.(livery.id)}
|
|
>
|
|
<Download className="w-4 h-4" />
|
|
</Button>
|
|
<Button
|
|
variant="danger"
|
|
className="px-3 py-1.5"
|
|
onClick={() => onDelete?.(livery.id)}
|
|
>
|
|
<Trash2 className="w-4 h-4" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
);
|
|
} |