61 lines
2.3 KiB
TypeScript
61 lines
2.3 KiB
TypeScript
import React from 'react';
|
|
import { Move, Pencil, Trash2 } from 'lucide-react';
|
|
import { GalleryImage } from '../../types';
|
|
|
|
interface GalleryGridProps {
|
|
images: GalleryImage[];
|
|
onEdit: (image: GalleryImage) => void;
|
|
onDelete: (id: string) => void;
|
|
onReorder: (dragIndex: number, dropIndex: number) => void;
|
|
}
|
|
|
|
export function GalleryGrid({ images, onEdit, onDelete, onReorder }: GalleryGridProps) {
|
|
return (
|
|
<div className="grid grid-cols-2 md:grid-cols-3 gap-4">
|
|
{images.map((image, index) => (
|
|
<div
|
|
key={image.id}
|
|
className="relative group border rounded-lg overflow-hidden"
|
|
draggable
|
|
onDragStart={(e) => e.dataTransfer.setData('text/plain', index.toString())}
|
|
onDragOver={(e) => e.preventDefault()}
|
|
onDrop={(e) => {
|
|
e.preventDefault();
|
|
const dragIndex = parseInt(e.dataTransfer.getData('text/plain'));
|
|
onReorder(dragIndex, index);
|
|
}}
|
|
>
|
|
<img
|
|
src={image.url}
|
|
alt={image.alt}
|
|
className="w-full h-48 object-cover"
|
|
/>
|
|
<div className="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-50 transition-opacity duration-200">
|
|
<div className="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-200">
|
|
<div className="flex space-x-2">
|
|
<button
|
|
onClick={() => onEdit(image)}
|
|
className="p-2 bg-white rounded-full text-gray-700 hover:text-blue-600"
|
|
>
|
|
<Pencil size={16} />
|
|
</button>
|
|
<button
|
|
onClick={() => onDelete(image.id)}
|
|
className="p-2 bg-white rounded-full text-gray-700 hover:text-red-600"
|
|
>
|
|
<Trash2 size={16} />
|
|
</button>
|
|
<button className="p-2 bg-white rounded-full text-gray-700 cursor-move">
|
|
<Move size={16} />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="absolute bottom-0 left-0 right-0 bg-black bg-opacity-50 text-white p-2 text-sm">
|
|
{image.caption}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
} |