function MainComponent() { const [images, setImages] = useState([]); const [selectedImages, setSelectedImages] = useState([]); const [error, setError] = useState({ type: '', message: '' }); const [loading, setLoading] = useState(false); useEffect(()=>{ document.title = "MAZ Digital Cards ❤️"; const link = document.createElement('link'); link.rel = 'icon'; link.href = "data:image/svg+xml,"; document.head.appendChild(link); const meta = document.createElement('meta'); meta.name = 'viewport'; meta.content = 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0'; document.head.appendChild(meta); document.body.style.margin = '0'; document.body.style.padding = '0'; document.documentElement.style.margin = '0'; document.documentElement.style.padding = '0'; document.body.style.overflow = 'hidden'; return ()=>{ document.head.removeChild(link); document.head.removeChild(meta); document.body.style.overflow = ''; document.body.style.margin = ''; document.body.style.padding = ''; document.documentElement.style.margin = ''; document.documentElement.style.padding = ''; }; }, []); useEffect(()=>{ const fetchImages = async ()=>{ setLoading(true); try { const response = await fetch('/api/list-images', { method: 'POST' }); if (!response.ok) { throw new Error('Failed to fetch images'); } const data = await response.json(); setImages(Array.isArray(data) ? data.sort((a, b)=>new Date(b.uploaded_at) - new Date(a.uploaded_at)) : []); } catch (err) { console.error('Error fetching images:', err); setError({ type: 'fetch', message: 'Failed to load images' }); setImages([]); } finally{ setLoading(false); } }; fetchImages(); }, []); const handleImageSelect = (imageUrl)=>{ setSelectedImages((prev)=>prev.includes(imageUrl) ? prev.filter((url)=>url !== imageUrl) : [ ...prev, imageUrl ]); }; const handleDownload = (imageUrl)=>{ const link = document.createElement('a'); link.href = imageUrl; link.download = 'digital-card'; document.body.appendChild(link); link.click(); document.body.removeChild(link); }; const handleDownloadSelected = ()=>{ selectedImages.forEach((imageUrl)=>{ handleDownload(imageUrl); }); setSelectedImages([]); }; return /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 overflow-hidden bg-gray-50", __source: { fileName: "", lineNumber: 81, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full h-full", __source: { fileName: "", lineNumber: 82, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 83, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-gradient-to-b from-pink-50 to-blue-50", __source: { fileName: "", lineNumber: 84, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "flex flex-col items-center justify-between gap-2 md:flex-row p-2", __source: { fileName: "", lineNumber: 85, columnNumber: 3 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 86, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "bg-gradient-to-r from-pink-500 to-blue-500 bg-clip-text text-2xl md:text-3xl font-bold text-transparent", __source: { fileName: "", lineNumber: 87, columnNumber: 7 }, __self: this }, "Digital Card Gallery"), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 90, columnNumber: 7 }, __self: this }, "Send heartfelt greetings with our beautiful collection"), /*#__PURE__*/ React.createElement("p", { className: "text-sm bg-gradient-to-r from-pink-400 to-blue-400 bg-clip-text text-transparent", __source: { fileName: "", lineNumber: 93, columnNumber: 7 }, __self: this }, "App created by MAZ with Create")), /*#__PURE__*/ React.createElement("div", { className: "flex gap-3", __source: { fileName: "", lineNumber: 97, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "https://www.paypal.me/mazbutt", target: "_blank", rel: "noopener noreferrer", className: "flex items-center gap-2 bg-gradient-to-r from-pink-500 to-blue-500 px-4 py-2 text-sm text-white transition-transform hover:scale-105", __source: { fileName: "", lineNumber: 98, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-coffee", __source: { fileName: "", lineNumber: 104, columnNumber: 9 }, __self: this }), "Buy Me a Coffee")))), selectedImages.length > 0 && /*#__PURE__*/ React.createElement("div", { className: "flex justify-end", __source: { fileName: "", lineNumber: 112, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handleDownloadSelected, className: "bg-gradient-to-r from-pink-500 to-blue-500 px-6 py-2 text-sm text-white transition-transform hover:scale-105", __source: { fileName: "", lineNumber: 113, columnNumber: 3 }, __self: this }, "Download Selected (", selectedImages.length, ")")), !Array.isArray(images) || images.length === 0 ? /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center bg-white h-[600px]", __source: { fileName: "", lineNumber: 123, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-images text-4xl text-gray-300", __source: { fileName: "", lineNumber: 124, columnNumber: 3 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-500", __source: { fileName: "", lineNumber: 125, columnNumber: 3 }, __self: this }, "No images available yet")) : /*#__PURE__*/ React.createElement("div", { className: "flex flex-col", __source: { fileName: "", lineNumber: 128, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6", __source: { fileName: "", lineNumber: 129, columnNumber: 15 }, __self: this }, images.map((image, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `group relative overflow-hidden bg-white p-2 ${selectedImages.includes(image) ? 'ring-2 ring-pink-500' : ''}`, onClick: ()=>handleImageSelect(image), __source: { fileName: "", lineNumber: 131, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "aspect-square", __source: { fileName: "", lineNumber: 138, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: image.url, alt: `Digital card ${index + 1}`, className: "h-full w-full object-cover", __source: { fileName: "", lineNumber: 139, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 145, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: (e)=>{ e.stopPropagation(); handleDownload(image.url); }, className: "w-full bg-gradient-to-r from-pink-500 to-blue-500 px-3 py-1.5 text-sm text-white", __source: { fileName: "", lineNumber: 146, columnNumber: 9 }, __self: this }, "Download")), selectedImages.includes(image) && /*#__PURE__*/ React.createElement("div", { className: "absolute right-2 top-2", __source: { fileName: "", lineNumber: 157, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-check-circle text-lg text-pink-500", __source: { fileName: "", lineNumber: 158, columnNumber: 11 }, __self: this }))))), loading && /*#__PURE__*/ React.createElement("div", { className: "flex justify-center", __source: { fileName: "", lineNumber: 166, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "animate-spin h-8 w-8 border-t-2 border-b-2 border-pink-500", __source: { fileName: "", lineNumber: 167, columnNumber: 3 }, __self: this })))))); }