@devvistatech/devvista-kit 0.0.10 → 0.0.12

package/dist/components/addOns/functional/galleries/GalleryComplex.jsx

@@ -1,605 +0,0 @@
-"use client";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
-    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (g && (g = 0, op[0] && (_ = 0)), _) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-};
-import { useState, useRef, useEffect } from "react";
-import { Card } from "@/components/other/card";
-import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/other/tabs";
-import { motion, useScroll, useTransform } from "framer-motion";
-import Image from "next/image";
-import { ActionButton, EditIconButton, TrashIconButton, CloseButton, SubmitButton, CancelButton, FilterButton, DeleteButton } from "@/components/other/button";
-import { Upload, X } from "lucide-react";
-import { useUser, useAuth } from "@clerk/nextjs";
-import { useStrapiAuth } from "@/lib/auth-context";
-import { GALLERY_COMPLEX } from "./constants/galleryComplex";
-export function GallerySection(_a) {
-    var _this = this;
-    var _b, _c, _d, _e, _f;
-    var user = _a.user, setUser = _a.setUser, authLoading = _a.authLoading, uploadedImages = _a.uploadedImages, setUploadedImages = _a.setUploadedImages, error = _a.error, setError = _a.setError, isLoading = _a.isLoading, setIsLoading = _a.setIsLoading, handleImageUpload = _a.handleImageUpload, handleDeleteImage = _a.handleDeleteImage;
-    var isSignedIn = useUser().isSignedIn;
-    var getToken = useAuth().getToken;
-    var checkSession = useStrapiAuth().checkSession;
-    var isAdmin = isSignedIn && !!(user === null || user === void 0 ? void 0 : user.businessAdminId) || false;
-    var _g = useState("photos"), activeTab = _g[0], setActiveTab = _g[1];
-    var _h = useState("all"), activeSubTab = _h[0], setActiveSubTab = _h[1];
-    var _j = useState(null), selectedImage = _j[0], setSelectedImage = _j[1];
-    var _k = useState(false), isMobile = _k[0], setIsMobile = _k[1];
-    var _l = useState(12), visiblePhotos = _l[0], setVisiblePhotos = _l[1];
-    var _m = useState(false), isConfirmDeleteOpen = _m[0], setIsConfirmDeleteOpen = _m[1];
-    var _o = useState(null), documentIdToDelete = _o[0], setDocumentIdToDelete = _o[1];
-    var _p = useState(false), isEditModalOpen = _p[0], setIsEditModalOpen = _p[1];
-    var _q = useState(false), isUploadModalOpen = _q[0], setIsUploadModalOpen = _q[1];
-    var _r = useState({
-        id: 0,
-        documentId: "",
-        title: "",
-        description: "",
-        category: "none",
-        file: null,
-    }), editForm = _r[0], setEditForm = _r[1];
-    var _s = useState({ file: null, title: "", description: "", category: "none" }), uploadForm = _s[0], setUploadForm = _s[1];
-    var containerRef = useRef(null);
-    var scrollYProgress = useScroll({
-        target: containerRef,
-        offset: ["start end", "end start"],
-    }).scrollYProgress;
-    var parallaxY = useTransform(scrollYProgress, [0, 1], [0, -50]);
-    var filteredImages = activeTab === "photos"
-        ? activeSubTab === "all"
-            ? uploadedImages
-            : uploadedImages.filter(function (img) { return (img.category || "none") === activeSubTab; })
-        : uploadedImages.filter(function (img) { return (img.category || "none") === activeTab; });
-    useEffect(function () {
-        var handleLogin = function () { return checkSession(); };
-        var handleLogout = function () { return checkSession(); };
-        window.addEventListener("user-login", handleLogin);
-        window.removeEventListener("user-logout", handleLogout);
-        return function () {
-            window.removeEventListener("user-login", handleLogin);
-            window.removeEventListener("user-logout", handleLogout);
-        };
-    }, [checkSession]);
-    useEffect(function () {
-        var checkMobile = function () { return setIsMobile(window.innerWidth < 768); };
-        checkMobile();
-        window.addEventListener("resize", checkMobile);
-        return function () { return window.removeEventListener("resize", checkMobile); };
-    }, []);
-    useEffect(function () {
-        if (selectedImage || isConfirmDeleteOpen || isEditModalOpen || isUploadModalOpen) {
-            document.body.classList.add("overflow-hidden");
-        }
-        else {
-            document.body.classList.remove("overflow-hidden");
-        }
-        return function () {
-            document.body.classList.remove("overflow-hidden");
-        };
-    }, [selectedImage, isConfirmDeleteOpen, isEditModalOpen, isUploadModalOpen]);
-    useEffect(function () {
-        var event = new CustomEvent("modalStateChange", {
-            detail: { isOpen: !!selectedImage || isConfirmDeleteOpen || isEditModalOpen || isUploadModalOpen },
-        });
-        window.dispatchEvent(event);
-    }, [selectedImage, isConfirmDeleteOpen, isEditModalOpen, isUploadModalOpen]);
-    useEffect(function () {
-        var handleEsc = function (e) {
-            if (e.key === "Escape") {
-                if (isConfirmDeleteOpen) {
-                    handleCancelDelete();
-                }
-                else if (selectedImage) {
-                    handleCloseModal();
-                }
-                else if (isEditModalOpen) {
-                    handleCloseEditModal();
-                }
-                else if (isUploadModalOpen) {
-                    handleCloseUploadModal();
-                }
-            }
-        };
-        window.addEventListener("keydown", handleEsc);
-        return function () { return window.removeEventListener("keydown", handleEsc); };
-    }, [isConfirmDeleteOpen, selectedImage, isEditModalOpen, isUploadModalOpen]);
-    var openConfirmDelete = function (documentId) {
-        if (!isAdmin) {
-            setError(GALLERY_COMPLEX.ERRORS.UNAUTHORIZED_DELETE);
-            return;
-        }
-        setDocumentIdToDelete(documentId);
-        setIsConfirmDeleteOpen(true);
-    };
-    var handleConfirmDelete = function () { return __awaiter(_this, void 0, void 0, function () {
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    if (!isAdmin) {
-                        setError(GALLERY_COMPLEX.ERRORS.UNAUTHORIZED_DELETE);
-                        setIsConfirmDeleteOpen(false);
-                        return [2 /*return*/];
-                    }
-                    if (!(documentIdToDelete !== null)) return [3 /*break*/, 4];
-                    setIsLoading(true);
-                    _a.label = 1;
-                case 1:
-                    _a.trys.push([1, , 3, 4]);
-                    return [4 /*yield*/, handleDeleteImage(documentIdToDelete)];
-                case 2:
-                    _a.sent();
-                    return [3 /*break*/, 4];
-                case 3:
-                    setIsLoading(false);
-                    setIsConfirmDeleteOpen(false);
-                    setDocumentIdToDelete(null);
-                    return [7 /*endfinally*/];
-                case 4: return [2 /*return*/];
-            }
-        });
-    }); };
-    var handleCancelDelete = function () {
-        setIsConfirmDeleteOpen(false);
-        setDocumentIdToDelete(null);
-    };
-    var handleImageClick = function (image) {
-        setSelectedImage(image);
-    };
-    var handleCloseModal = function () {
-        setSelectedImage(null);
-    };
-    var openEditModal = function (image) {
-        var _a;
-        if (!isAdmin) {
-            setError(GALLERY_COMPLEX.ERRORS.UNAUTHORIZED_EDIT);
-            return;
-        }
-        setEditForm({
-            id: image.id,
-            documentId: image.documentId,
-            title: ((_a = image.title) === null || _a === void 0 ? void 0 : _a.trim()) && !image.title.match(/Image \d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z/) ? image.title : "",
-            description: image.description || "",
-            category: image.category || "none",
-            file: null,
-        });
-        setIsEditModalOpen(true);
-    };
-    var handleCloseEditModal = function () {
-        setIsEditModalOpen(false);
-        setEditForm({ id: 0, documentId: "", title: "", description: "", category: "none", file: null });
-    };
-    var handleCloseUploadModal = function () {
-        setIsUploadModalOpen(false);
-        setUploadForm({ file: null, title: "", description: "", category: "none" });
-    };
-    var handleEditImage = function (e) { return __awaiter(_this, void 0, void 0, function () {
-        var token, formData, response, errorData, data, err_1;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    e.preventDefault();
-                    if (!isAdmin) {
-                        console.error("GallerySection: Unauthorized edit attempt", {
-                            isSignedIn: isSignedIn,
-                            businessAdminId: user === null || user === void 0 ? void 0 : user.businessAdminId,
-                        });
-                        setError(GALLERY_COMPLEX.ERRORS.UNAUTHORIZED_EDIT);
-                        return [2 /*return*/];
-                    }
-                    _a.label = 1;
-                case 1:
-                    _a.trys.push([1, 7, 8, 9]);
-                    setIsLoading(true);
-                    return [4 /*yield*/, getToken()];
-                case 2:
-                    token = _a.sent();
-                    if (!token) {
-                        console.error("GallerySection: No authentication token available");
-                        setError(GALLERY_COMPLEX.ERRORS.AUTHENTICATION_ERROR);
-                        setUser(null);
-                        return [2 /*return*/];
-                    }
-                    formData = new FormData();
-                    formData.append("documentId", editForm.documentId);
-                    formData.append("title", editForm.title || "Image ".concat(new Date().toISOString()));
-                    formData.append("description", editForm.description || "");
-                    formData.append("category", editForm.category || "none");
-                    if (editForm.file) {
-                        formData.append("file", editForm.file);
-                    }
-                    return [4 /*yield*/, fetch("/api/gallery-data", {
-                            method: "PUT",
-                            headers: {
-                                Authorization: "Bearer ".concat(token),
-                            },
-                            body: formData,
-                        })];
-                case 3:
-                    response = _a.sent();
-                    if (!!response.ok) return [3 /*break*/, 5];
-                    return [4 /*yield*/, response.json()];
-                case 4:
-                    errorData = _a.sent();
-                    console.error("GallerySection: Edit failed", { status: response.status, errorData: errorData });
-                    if (response.status === 401) {
-                        setError(GALLERY_COMPLEX.ERRORS.AUTHENTICATION_ERROR);
-                        setUser(null);
-                        return [2 /*return*/];
-                    }
-                    throw new Error(errorData.error || GALLERY_COMPLEX.ERRORS.EDIT_FAILED_STATUS.replace("${response.status}", response.status.toString()));
-                case 5: return [4 /*yield*/, response.json()];
-                case 6:
-                    data = (_a.sent()).data;
-                    setUploadedImages(data || []);
-                    setError(null);
-                    setIsEditModalOpen(false);
-                    setEditForm({ id: 0, documentId: "", title: "", description: "", category: "none", file: null });
-                    return [3 /*break*/, 9];
-                case 7:
-                    err_1 = _a.sent();
-                    console.error("GallerySection: Edit Error", err_1);
-                    setError(err_1 instanceof Error ? err_1.message : GALLERY_COMPLEX.ERRORS.EDIT_FAILED);
-                    return [3 /*break*/, 9];
-                case 8:
-                    setIsLoading(false);
-                    return [7 /*endfinally*/];
-                case 9: return [2 /*return*/];
-            }
-        });
-    }); };
-    var handleUploadSubmit = function (e) { return __awaiter(_this, void 0, void 0, function () {
-        var err_2;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    e.preventDefault();
-                    if (!isAdmin) {
-                        console.error("GallerySection: Unauthorized upload attempt", {
-                            isSignedIn: isSignedIn,
-                            businessAdminId: user === null || user === void 0 ? void 0 : user.businessAdminId,
-                        });
-                        setError(GALLERY_COMPLEX.ERRORS.UNAUTHORIZED_UPLOAD);
-                        return [2 /*return*/];
-                    }
-                    setIsLoading(true);
-                    _a.label = 1;
-                case 1:
-                    _a.trys.push([1, 3, 4, 5]);
-                    return [4 /*yield*/, handleImageUpload(e, uploadForm.file, uploadForm.title, uploadForm.description, uploadForm.category || "none")];
-                case 2:
-                    _a.sent();
-                    setUploadForm({ file: null, title: "", description: "", category: "none" });
-                    setIsUploadModalOpen(false);
-                    return [3 /*break*/, 5];
-                case 3:
-                    err_2 = _a.sent();
-                    console.error("GallerySection: Upload Error", err_2);
-                    setError(err_2 instanceof Error ? err_2.message : GALLERY_COMPLEX.ERRORS.UPLOAD_FAILED);
-                    return [3 /*break*/, 5];
-                case 4:
-                    setIsLoading(false);
-                    return [7 /*endfinally*/];
-                case 5: return [2 /*return*/];
-            }
-        });
-    }); };
-    var loadMore = function () {
-        setVisiblePhotos(function (prev) { return prev + 12; });
-    };
-    var sectionVariants = {
-        hidden: { opacity: 0 },
-        visible: {
-            opacity: 1,
-            transition: { duration: 0.8, ease: [0.16, 1, 0.3, 1], staggerChildren: 0.1 },
-        },
-    };
-    var cardVariants = {
-        hidden: { opacity: 0, y: 30 },
-        visible: {
-            opacity: 1,
-            y: 0,
-            transition: { duration: 0.5 },
-        },
-    };
-    var modalVariants = {
-        hidden: { opacity: 0, y: "100vh" },
-        visible: { opacity: 1, y: 0, transition: { duration: 0.5, ease: [0.16, 1, 0.3, 1] } },
-        exit: { opacity: 0, y: "100vh", transition: { duration: 0.3, ease: "easeIn" } },
-    };
-    return (<div className="w-full font-inter">
-      <motion.div variants={sectionVariants} initial="hidden" whileInView="visible" viewport={{ once: true }} className="p-4 sm:p-8 lg:p-12" ref={containerRef}>
-        <Tabs defaultValue="photos" className="w-full" onValueChange={function (value) { return setActiveTab(value); }}>
-          <TabsList className="grid w-full md:w-3/4 mx-auto grid-cols-2 mb-12 bg-white/10 backdrop-blur-lg border-2 border-transparent shadow-xl rounded-[2rem] p-4 h-24 supports-[not(backdrop-filter:blur(10px))]:bg-white/20">
-            {["photos", "videos"].map(function (tab) { return (<TabsTrigger key={tab} value={tab} className="rounded-[1.5rem] text-xl sm:text-2xl font-bold text-gray-700 data-[state=active]:text-white data-[state=active]:bg-blue-600 h-full flex items-center justify-center transition-all duration-300">
-                {tab === "photos" ? GALLERY_COMPLEX.UI.PHOTOS_TAB : GALLERY_COMPLEX.UI.VIDEOS_TAB}
-              </TabsTrigger>); })}
-          </TabsList>
-          <TabsContent value="photos">
-            <Tabs defaultValue="all" onValueChange={function (value) { return setActiveSubTab(value); }}>
-              {isMobile ? (<div className="flex justify-center mb-6 max-w-2xl mx-auto">
-                  <select value={activeSubTab} onChange={function (e) { return setActiveSubTab(e.target.value); }} className="px-4 py-2 text-base font-medium text-gray-600 bg-white rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 w-full max-w-xs">
-                    {["all", "indoor", "outdoor", "commercial"].map(function (subTab) { return (<option key={subTab} value={subTab}>
-                        {subTab === "all" ? GALLERY_COMPLEX.UI.ALL_SUB_TAB :
-                    subTab === "indoor" ? GALLERY_COMPLEX.UI.INDOOR_SUB_TAB :
-                        subTab === "outdoor" ? GALLERY_COMPLEX.UI.OUTDOOR_SUB_TAB :
-                            GALLERY_COMPLEX.UI.COMMERCIAL_SUB_TAB}
-                      </option>); })}
-                  </select>
-                </div>) : (<div className="flex justify-center gap-4 mb-12 max-w-2xl mx-auto">
-                  {["all", "indoor", "outdoor", "commercial"].map(function (subTab) { return (<FilterButton key={subTab} isActive={activeSubTab === subTab} useBlueActive={true} onClick={function () { return setActiveSubTab(subTab); }}>
-                      {subTab === "all" ? GALLERY_COMPLEX.UI.ALL_SUB_TAB :
-                    subTab === "indoor" ? GALLERY_COMPLEX.UI.INDOOR_SUB_TAB :
-                        subTab === "outdoor" ? GALLERY_COMPLEX.UI.OUTDOOR_SUB_TAB :
-                            GALLERY_COMPLEX.UI.COMMERCIAL_SUB_TAB}
-                    </FilterButton>); })}
-                </div>)}
-
-              {["all", "indoor", "outdoor", "commercial"].map(function (subTab) { return (<TabsContent key={subTab} value={subTab}>
-                  <div className="space-y-6">
-                    {error && (<p className="text-red-400 text-base sm:text-lg md:text-xl text-center">{error}</p>)}
-                    {isAdmin && (<div className="flex justify-center pb-12">
-                        <ActionButton onClick={function () { return setIsUploadModalOpen(true); }} className="flex items-center gap-2" disabled={isLoading}>
-                          <Upload className="h-4 w-4 sm:h-5 sm:w-5"/>
-                          {GALLERY_COMPLEX.BUTTONS.UPLOAD_IMAGE_BUTTON}
-                        </ActionButton>
-                      </div>)}
-                    {filteredImages.length > 0 ? (<>
-                        <motion.div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-2 sm:gap-8" style={{ y: isMobile ? 0 : parallaxY }}>
-                          {filteredImages.slice(0, visiblePhotos).map(function (image, index) {
-                    var _a, _b, _c, _d, _e;
-                    return (<motion.div key={image.documentId} variants={cardVariants} initial="hidden" whileInView="visible" viewport={{ once: true, amount: 0.2 }} onClick={function () { return handleImageClick(image); }} className="cursor-pointer will-change-transform will-change-opacity">
-                              <Card className="overflow-hidden bg-white/10 backdrop-blur-lg border-2 border-transparent shadow-xl rounded-[1.5rem] p-2 sm:p-4 relative supports-[not(backdrop-filter:blur(10px))]:bg-white/20">
-                                <div className="relative w-full aspect-[3/2]">
-                                  <Image src={image.url} alt={((_a = image.title) === null || _a === void 0 ? void 0 : _a.trim()) &&
-                            !image.title.match(/Image \d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z/)
-                            ? image.title
-                            : GALLERY_COMPLEX.UI.DEFAULT_IMAGE_ALT} fill className="object-cover object-center rounded-[1rem] transition-all duration-300" priority={index === 0} loading={index === 0 ? "eager" : "lazy"} quality={85}/>
-                                </div>
-                                {isAdmin && (<div className="absolute top-2 right-2 flex space-x-2">
-                                    <EditIconButton onClick={function (e) {
-                                e.stopPropagation();
-                                openEditModal(image);
-                            }}/>
-                                    <TrashIconButton onClick={function (e) {
-                                e.stopPropagation();
-                                openConfirmDelete(image.documentId);
-                            }}/>
-                                  </div>)}
-                                {(((_b = image.title) === null || _b === void 0 ? void 0 : _b.trim()) &&
-                            !image.title.match(/Image \d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z/) ||
-                            ((_c = image.description) === null || _c === void 0 ? void 0 : _c.trim())) && (<div className="p-4">
-                                      {((_d = image.title) === null || _d === void 0 ? void 0 : _d.trim()) &&
-                                !image.title.match(/Image \d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z/) && (<h3 className="text-lg font-semibold text-gray-700">{image.title}</h3>)}
-                                      {((_e = image.description) === null || _e === void 0 ? void 0 : _e.trim()) && (<p className="text-sm text-gray-600 line-clamp-2">{image.description}</p>)}
-                                    </div>)}
-                              </Card>
-                            </motion.div>);
-                })}
-                        </motion.div>
-                        {visiblePhotos < filteredImages.length && (<div className="mt-8 text-center">
-                            <ActionButton onClick={loadMore} className="flex items-center gap-2">
-                              {GALLERY_COMPLEX.BUTTONS.LOAD_MORE_BUTTON}
-                            </ActionButton>
-                          </div>)}
-                      </>) : (<p className="text-center text-gray-700 font-bold text-base sm:text-lg md:text-xl">
-                        {GALLERY_COMPLEX.UI.NO_IMAGES_MESSAGE}
-                      </p>)}
-                  </div>
-                </TabsContent>); })}
-            </Tabs>
-          </TabsContent>
-
-          <TabsContent value="videos">
-            <div className="space-y-6">
-              <p className="text-center text-gray-700 font-bold text-base sm:text-lg md:text-xl">
-                {GALLERY_COMPLEX.UI.NO_VIDEOS_MESSAGE || "No videos are available"}
-              </p>
-            </div>
-          </TabsContent>
-        </Tabs>
-        <div className="mt-4 text-center">
-          {authLoading || isLoading ? (<p className="text-gray-400 text-sm font-medium">{GALLERY_COMPLEX.UI.LOADING_MESSAGE}</p>) : isAdmin ? (<p className="text-gray-400 text-sm font-medium">{GALLERY_COMPLEX.UI.ADMIN_LOGGED_IN_MESSAGE}</p>) : user ? (<p className="text-gray-400 text-sm font-medium"></p>) : (<p className="text-gray-400 text-sm font-medium"></p>)}
-        </div>
-      </motion.div>
-      {selectedImage && (<motion.div variants={modalVariants} initial="hidden" animate="visible" exit="exit" className="fixed inset-0 bg-black/90 flex items-center justify-center z-[10000] p-2 sm:p-4 isolate" onClick={handleCloseModal} role="dialog" aria-modal="true" aria-labelledby="modal-image">
-          <div className="relative max-w-5xl w-full mx-2 sm:mx-4 max-h-[90vh] bg-gray-800/50 border border-gray-700/50 rounded-2xl shadow-lg overflow-hidden max-[768px]:p-4 max-[768px]:max-h-[85vh]" onClick={function (e) { return e.stopPropagation(); }}>
-            <CloseButton variant="close-form" onClick={handleCloseModal}>
-              <X className="h-6 w-6 sm:h-8 sm:w-8"/>
-            </CloseButton>
-            <div className="relative w-full h-[70vh] sm:h-[80vh]">
-              <Image src={selectedImage.url} alt={((_b = selectedImage.title) === null || _b === void 0 ? void 0 : _b.trim()) &&
-                !selectedImage.title.match(/Image \d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z/)
-                ? selectedImage.title
-                : GALLERY_COMPLEX.UI.DEFAULT_IMAGE_ALT} fill className="object-contain rounded-2xl" quality={85}/>
-              {(((_c = selectedImage.title) === null || _c === void 0 ? void 0 : _c.trim()) &&
-                !selectedImage.title.match(/Image \d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z/) ||
-                ((_d = selectedImage.description) === null || _d === void 0 ? void 0 : _d.trim())) && (<div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent p-3 sm:p-4">
-                    {((_e = selectedImage.title) === null || _e === void 0 ? void 0 : _e.trim()) &&
-                    !selectedImage.title.match(/Image \d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z/) && (<h3 className="text-lg sm:text-xl md:text-2xl font-bold text-white drop-shadow-lg">
-                          {selectedImage.title}
-                        </h3>)}
-                    {((_f = selectedImage.description) === null || _f === void 0 ? void 0 : _f.trim()) && (<p className="text-xs sm:text-sm md:text-base text-gray-200 drop-shadow-md line-clamp-2">
-                        {selectedImage.description}
-                      </p>)}
-                  </div>)}
-            </div>
-          </div>
-        </motion.div>)}
-
-      {isConfirmDeleteOpen && isAdmin && (<motion.div variants={modalVariants} initial="hidden" animate="visible" exit="exit" className="fixed inset-0 bg-black/90 flex items-center justify-center z-[10000] p-4 isolate" onClick={handleCancelDelete} role="dialog" aria-modal="true" aria-labelledby="modal-title">
-          <div className="relative max-w-md w-full mx-4 p-6 bg-gray-800/50 border border-gray-700/50 rounded-lg shadow-lg max-[768px]:p-4 max-[768px]:max-h-[85vh]" onClick={function (e) { return e.stopPropagation(); }}>
-            <CloseButton onClick={handleCancelDelete}>
-              <X className="h-6 w-6 sm:h-8 sm:w-8"/>
-            </CloseButton>
-            <h3 id="modal-title" className="text-xl font-bold text-white mb-4">
-              {GALLERY_COMPLEX.UI.DELETE_MODAL_HEADING}
-            </h3>
-            <p className="text-gray-300 text-sm mb-4">
-              {GALLERY_COMPLEX.UI.DELETE_CONFIRMATION_MESSAGE}
-            </p>
-            <div className="flex space-x-3">
-              <DeleteButton onClick={handleConfirmDelete} disabled={isLoading}>
-                {isLoading ? GALLERY_COMPLEX.BUTTONS.DELETING_BUTTON : GALLERY_COMPLEX.BUTTONS.DELETE_BUTTON}
-              </DeleteButton>
-              <CancelButton onClick={handleCancelDelete}/>
-            </div>
-          </div>
-        </motion.div>)}
-
-      {isEditModalOpen && isAdmin && (<motion.div variants={modalVariants} initial="hidden" animate="visible" exit="exit" className="fixed inset-0 bg-black/90 flex items-center justify-center z-[10000] p-4 isolate" onClick={handleCloseEditModal} role="dialog" aria-modal="true" aria-labelledby="edit-modal-title">
-          <div className="relative max-w-md w-full mx-4 p-6 bg-gray-800/50 border border-gray-700/50 rounded-lg shadow-lg max-[768px]:p-4 max-[768px]:max-h-[85vh]" onClick={function (e) { return e.stopPropagation(); }}>
-            <CloseButton onClick={handleCloseEditModal}>
-              <X className="h-6 w-6 sm:h-8 sm:w-8"/>
-            </CloseButton>
-            <h3 id="edit-modal-title" className="text-xl font-bold text-white mb-4">
-              {GALLERY_COMPLEX.UI.EDIT_MODAL_HEADING}
-            </h3>
-            <form onSubmit={handleEditImage} className="flex flex-col space-y-4">
-              <div>
-                <label htmlFor="edit-image" className="block text-sm font-medium text-gray-300 mb-1">
-                  Replace Image (optional)
-                </label>
-                <input id="edit-image" type="file" accept="image/jpeg,image/png,image/gif" onChange={function (e) { var _a; return setEditForm(__assign(__assign({}, editForm), { file: ((_a = e.target.files) === null || _a === void 0 ? void 0 : _a[0]) || null })); }} className="p-2 bg-gray-700 text-white rounded-lg w-full focus:outline-none focus:ring-2 focus:ring-blue-500" disabled={isLoading}/>
-                {editForm.file && (<p className="mt-2 text-gray-300 text-sm">Selected: {editForm.file.name}</p>)}
-              </div>
-              <div>
-                <label htmlFor="edit-title" className="block text-sm font-medium text-gray-300 mb-1">
-                  Image Title (optional)
-                </label>
-                <input id="edit-title" value={editForm.title} onChange={function (e) { return setEditForm(__assign(__assign({}, editForm), { title: e.target.value })); }} placeholder={GALLERY_COMPLEX.UI.TITLE_PLACEHOLDER} className="p-2 bg-gray-700 text-white rounded-lg w-full focus:outline-none focus:ring-2 focus:ring-blue-500" disabled={isLoading}/>
-              </div>
-              <div>
-                <label htmlFor="edit-description" className="block text-sm font-medium text-gray-300 mb-1">
-                  Image Description (optional)
-                </label>
-                <textarea id="edit-description" value={editForm.description} onChange={function (e) { return setEditForm(__assign(__assign({}, editForm), { description: e.target.value })); }} placeholder={GALLERY_COMPLEX.UI.DESCRIPTION_PLACEHOLDER} className="p-2 bg-gray-700 text-white rounded-lg w-full h-24 focus:outline-none focus:ring-2 focus:ring-blue-500" disabled={isLoading}/>
-              </div>
-              <div>
-                <label htmlFor="edit-category" className="block text-sm font-medium text-gray-300 mb-1">
-                  Category
-                </label>
-                <select id="edit-category" value={editForm.category || "none"} onChange={function (e) {
-                return setEditForm(__assign(__assign({}, editForm), { category: e.target.value }));
-            }} className="p-2 bg-gray-700 text-white rounded-lg w-full focus:outline-none focus:ring-2 focus:ring-blue-500" disabled={isLoading}>
-                  <option value="none">{GALLERY_COMPLEX.UI.CATEGORY_NONE}</option>
-                  <option value="indoor">{GALLERY_COMPLEX.UI.CATEGORY_INDOOR}</option>
-                  <option value="outdoor">{GALLERY_COMPLEX.UI.CATEGORY_OUTDOOR}</option>
-                  <option value="commercial">{GALLERY_COMPLEX.UI.CATEGORY_COMMERCIAL}</option>
-                </select>
-              </div>
-              <div className="flex space-x-3">
-                <SubmitButton type="submit" disabled={isLoading}>
-                  {isLoading ? GALLERY_COMPLEX.BUTTONS.SAVING_BUTTON : GALLERY_COMPLEX.BUTTONS.SAVE_BUTTON}
-                </SubmitButton>
-                <CancelButton onClick={handleCloseEditModal}/>
-              </div>
-            </form>
-          </div>
-        </motion.div>)}
-
-      {isUploadModalOpen && isAdmin && (<motion.div variants={modalVariants} initial="hidden" animate="visible" exit="exit" className="fixed inset-0 bg-black/90 flex items-center justify-center z-[10000] p-4 isolate" onClick={handleCloseUploadModal} role="dialog" aria-modal="true" aria-labelledby="upload-modal-title">
-          <div className="relative max-w-md w-full mx-4 p-6 bg-gray-800/50 border border-gray-700/50 rounded-lg shadow-lg max-[768px]:p-4 max-[768px]:max-h-[85vh]" onClick={function (e) { return e.stopPropagation(); }}>
-            <CloseButton onClick={handleCloseUploadModal}>
-              <X className="h-6 w-6 sm:h-8 sm:w-8"/>
-            </CloseButton>
-            <h3 id="upload-modal-title" className="text-xl font-bold text-white mb-4">
-              {GALLERY_COMPLEX.UI.UPLOAD_MODAL_HEADING}
-            </h3>
-            <form onSubmit={handleUploadSubmit} className="flex flex-col space-y-4">
-              <div>
-                <label htmlFor="image-upload" className="block text-sm font-medium text-gray-300 mb-1">
-                  Choose Image
-                </label>
-                <input type="file" accept="image/jpeg,image/png,image/gif" onChange={function (e) {
-                var _a;
-                var file = ((_a = e.target.files) === null || _a === void 0 ? void 0 : _a[0]) || null;
-                setUploadForm(__assign(__assign({}, uploadForm), { file: file }));
-            }} disabled={isLoading} className="hidden" id="image-upload"/>
-                <label htmlFor="image-upload" className="cursor-pointer">
-                  <div className="flex items-center justify-between bg-gray-700 text-white px-4 py-2 rounded-lg">
-                    <span>{uploadForm.file ? uploadForm.file.name : GALLERY_COMPLEX.UI.CHOOSE_IMAGE_TEXT}</span>
-                    <Upload className="h-4 w-4"/>
-                  </div>
-                </label>
-              </div>
-              <div>
-                <label htmlFor="upload-title" className="block text-sm font-medium text-gray-300 mb-1">
-                  Image Title (optional)
-                </label>
-                <input id="upload-title" value={uploadForm.title} onChange={function (e) { return setUploadForm(__assign(__assign({}, uploadForm), { title: e.target.value })); }} placeholder={GALLERY_COMPLEX.UI.TITLE_PLACEHOLDER} className="p-2 bg-gray-700 text-white rounded-lg w-full focus:outline-none focus:ring-2 focus:ring-blue-500" disabled={isLoading}/>
-              </div>
-              <div>
-                <label htmlFor="upload-description" className="block text-sm font-medium text-gray-300 mb-1">
-                  Image Description (optional)
-                </label>
-                <textarea id="upload-description" value={uploadForm.description} onChange={function (e) { return setUploadForm(__assign(__assign({}, uploadForm), { description: e.target.value })); }} placeholder={GALLERY_COMPLEX.UI.DESCRIPTION_PLACEHOLDER} className="p-2 bg-gray-700 text-white rounded-lg w-full h-24 focus:outline-none focus:ring-2 focus:ring-blue-500" disabled={isLoading}/>
-              </div>
-              <div>
-                <label htmlFor="upload-category" className="block text-sm font-medium text-gray-300 mb-1">
-                  Category
-                </label>
-                <select id="upload-category" value={uploadForm.category || "none"} onChange={function (e) {
-                return setUploadForm(__assign(__assign({}, uploadForm), { category: e.target.value }));
-            }} className="p-2 bg-gray-700 text-white rounded-lg w-full focus:outline-none focus:ring-2 focus:ring-blue-500" disabled={isLoading}>
-                  <option value="none">{GALLERY_COMPLEX.UI.CATEGORY_NONE}</option>
-                  <option value="indoor">{GALLERY_COMPLEX.UI.CATEGORY_INDOOR}</option>
-                  <option value="outdoor">{GALLERY_COMPLEX.UI.CATEGORY_OUTDOOR}</option>
-                  <option value="commercial">{GALLERY_COMPLEX.UI.CATEGORY_COMMERCIAL}</option>
-                </select>
-              </div>
-              <div className="flex space-x-3">
-                <SubmitButton type="submit" disabled={isLoading || !uploadForm.file}>
-                  {isLoading ? GALLERY_COMPLEX.BUTTONS.UPLOADING_BUTTON : GALLERY_COMPLEX.BUTTONS.UPLOAD_BUTTON}
-                </SubmitButton>
-                <CancelButton onClick={handleCloseUploadModal}/>
-              </div>
-            </form>
-          </div>
-        </motion.div>)}
-
-      <motion.div initial={{ opacity: 0, scale: 0.8 }} animate={{ opacity: 0, scale: 0.8 }} transition={{ duration: 0.3 }} className="fixed bottom-6 right-6 z-40 pb-24"/>
-    </div>);
-}