'use client'
import { X } from 'lucide-react'
import { useState } from 'react'
const UploadPage = () => {
const [selectedFiles, setSelectedFiles] = useState<File[]>([])
const [currentSlide, setCurrentSlide] = useState(0)
const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
if (event.target.files) {
const filesArray = Array.from(event.target.files)
setSelectedFiles(prevFiles => [...prevFiles, ...filesArray])
}
}
const removeImage = (index: number) => {
setSelectedFiles((prevFiles) => prevFiles.filter((_, i) => i !== index));
};
const handleImageClick = (index: number) => {
console.log('Edit image at index:', index)
}
return (
<div className="flex flex-col items-center justify-center p-6">
<h1 className="text-3xl font-bold mb-6">Upload Images</h1>
<div className="mb-6">
<label className="cursor-pointer bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600">
Upload Images
<input
type="file"
multiple
accept="image/*"
onChange={handleFileChange}
className="hidden"
/>
</label>
</div>
<div
className="relative w-full max-w-4xl">
<div className="grid grid-cols-3 gap-4">
{selectedFiles
.slice(currentSlide * 9, (currentSlide + 1) * 9)
.map((file, index) => (
<div
key={index}
className="relative cursor-pointer"
onClick={() => handleImageClick(index + currentSlide * 9)}
>
<img
src={URL.createObjectURL(file)}
alt={`uploaded preview ${index}`}
className="w-full h-52 object-cover rounded-3xl shadow-md"
/>
<button
onClick={() => removeImage(index + currentSlide * 9)}
className="absolute flex justify-center items-center -top-3 right-1 bg-gray-500 text-white w-5 h-5 rounded-full p-1 hover:bg-red-600"
>
<X />
</button>
</div>
))}
</div>
</div>
</div>
)
}
export default UploadPage