Ichitux
84 lines
2.8 KiB
TypeScript
84 lines
2.8 KiB
TypeScript
import { Image, Eye, Trash2, Download } from 'lucide-react';
|
|
|
|
interface CoverData {
|
|
id: string;
|
|
filename: string;
|
|
url: string;
|
|
createdAt: string;
|
|
}
|
|
|
|
interface CoverGalleryProps {
|
|
covers: CoverData[];
|
|
onSelect: (coverUrl: string) => void;
|
|
onDelete: (coverId: string) => void;
|
|
}
|
|
|
|
export default function CoverGallery({ covers, onSelect, onDelete }: CoverGalleryProps) {
|
|
if (covers.length === 0) {
|
|
return (
|
|
<div className="card text-center py-12">
|
|
<Image className="w-16 h-16 text-gray-300 mx-auto mb-4" />
|
|
<h3 className="text-lg font-medium text-gray-900">No covers yet</h3>
|
|
<p className="text-gray-500 mt-2">
|
|
Upload a cover image or generate one with AI to get started
|
|
</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
|
|
{covers.map((cover) => (
|
|
<div
|
|
key={cover.id}
|
|
className="card p-0 overflow-hidden group hover:shadow-lg transition-shadow"
|
|
>
|
|
<div className="aspect-[2/3] relative bg-gray-100">
|
|
<img
|
|
src={cover.url}
|
|
alt={cover.filename}
|
|
className="w-full h-full object-cover"
|
|
/>
|
|
<div className="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center gap-2">
|
|
<button
|
|
onClick={() => onSelect(cover.url)}
|
|
className="p-2 bg-white rounded-lg hover:bg-gray-100 transition-colors"
|
|
title="Edit"
|
|
>
|
|
<Eye className="w-5 h-5 text-gray-700" />
|
|
</button>
|
|
<button
|
|
onClick={() => {
|
|
const link = document.createElement('a');
|
|
link.href = cover.url;
|
|
link.download = cover.filename;
|
|
link.click();
|
|
}}
|
|
className="p-2 bg-white rounded-lg hover:bg-gray-100 transition-colors"
|
|
title="Download"
|
|
>
|
|
<Download className="w-5 h-5 text-gray-700" />
|
|
</button>
|
|
<button
|
|
onClick={() => onDelete(cover.id)}
|
|
className="p-2 bg-red-500 rounded-lg hover:bg-red-600 transition-colors"
|
|
title="Delete"
|
|
>
|
|
<Trash2 className="w-5 h-5 text-white" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div className="p-3">
|
|
<p className="text-sm font-medium text-gray-900 truncate">
|
|
{cover.filename}
|
|
</p>
|
|
<p className="text-xs text-gray-500 mt-1">
|
|
{new Date(cover.createdAt).toLocaleDateString()}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|