@devvistatech/devvista-kit 0.0.1

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

@@ -0,0 +1,385 @@
+"use client";
+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;
+    return g = { next: verb(0), "throw": verb(1), "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, TrashIconButton, CloseButton, SubmitButton, CancelButton, DeleteButton } from "@/components/other/button";
+import { Upload, X } from "lucide-react";
+import { useUser } from "@clerk/nextjs";
+import { useStrapiAuth } from "@/lib/auth-context";
+import { GALLERY_SIMPLE } from "./constants/gallerySimple";
+export function GallerySection(_a) {
+    var _this = this;
+    var user = _a.user, authLoading = _a.authLoading, uploadedImages = _a.uploadedImages, setUploadedImages = _a.setUploadedImages, error = _a.error, setError = _a.setError, isLoading = _a.isLoading, setIsLoading = _a.setIsLoading, setUser = _a.setUser, handleImageUpload = _a.handleImageUpload, handleDeleteImage = _a.handleDeleteImage;
+    var isSignedIn = useUser().isSignedIn;
+    var checkSession = useStrapiAuth().checkSession;
+    var isAdmin = isSignedIn && !!(user === null || user === void 0 ? void 0 : user.businessAdminId);
+    var _b = useState("photos"), activeTab = _b[0], setActiveTab = _b[1];
+    var _c = useState(null), selectedImage = _c[0], setSelectedImage = _c[1];
+    var _d = useState(false), isMobile = _d[0], setIsMobile = _d[1];
+    var _e = useState(12), visiblePhotos = _e[0], setVisiblePhotos = _e[1];
+    var _f = useState(false), isConfirmDeleteOpen = _f[0], setIsConfirmDeleteOpen = _f[1];
+    var _g = useState(false), isUploadModalOpen = _g[0], setIsUploadModalOpen = _g[1];
+    var _h = useState(null), documentIdToDelete = _h[0], setDocumentIdToDelete = _h[1];
+    var _j = useState(null), selectedFile = _j[0], setSelectedFile = _j[1];
+    var fileInputRef = useRef(null);
+    var containerRef = useRef(null);
+    var scrollYProgress = useScroll({
+        target: containerRef,
+        offset: ["start end", "end start"],
+    }).scrollYProgress;
+    var parallaxY = useTransform(scrollYProgress, [0, 1], [0, -50]);
+    var videos = GALLERY_SIMPLE.UI.VIDEO_TITLES.map(function (title, index) { return ({
+        url: [
+            "https://www.youtube.com/embed/Ch5fnKgDZH8",
+            "https://www.youtube.com/embed/XW3zDzMZNv8",
+            "https://www.youtube.com/embed/odC_X6g1uFs",
+            "https://www.youtube.com/embed/DFuBBzMi6ZA",
+            "https://www.youtube.com/embed/zZNMJyMmcFQ",
+            "https://www.youtube.com/embed/VRpbsZGU4a0",
+            "https://www.youtube.com/embed/qE14UbB3-gs",
+            "https://www.youtube.com/embed/QoVE5TqMkvU",
+            "https://www.youtube.com/embed/7Fzgw0SK-8k",
+            "https://www.youtube.com/embed/wN0j6JoliAE",
+            "https://www.youtube.com/embed/vzFZzhB8KvA",
+            "https://www.youtube.com/embed/4thuylOfM9w",
+            "https://www.youtube.com/embed/sm3l_uPtaws",
+            "https://www.youtube.com/embed/xnnlanydT5I",
+            "https://www.youtube.com/embed/jLLePKwiFpI",
+            "https://www.youtube.com/embed/pBlpMq8JbIA",
+        ][index],
+        title: title,
+    }); });
+    useEffect(function () {
+        var handleLogin = function () { return checkSession(); };
+        var handleLogout = function () { return checkSession(); };
+        window.addEventListener("user-login", handleLogin);
+        window.addEventListener("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 || isUploadModalOpen) {
+            document.body.classList.add("overflow-hidden");
+        }
+        else {
+            document.body.classList.remove("overflow-hidden");
+        }
+        return function () {
+            document.body.classList.remove("overflow-hidden");
+        };
+    }, [selectedImage, isConfirmDeleteOpen, isUploadModalOpen]);
+    useEffect(function () {
+        var event = new CustomEvent("modalStateChange", {
+            detail: { isOpen: !!selectedImage || isConfirmDeleteOpen || isUploadModalOpen },
+        });
+        window.dispatchEvent(event);
+    }, [selectedImage, isConfirmDeleteOpen, isUploadModalOpen]);
+    useEffect(function () {
+        var handleEsc = function (e) {
+            if (e.key === "Escape") {
+                if (isConfirmDeleteOpen) {
+                    handleCancelDelete();
+                }
+                else if (selectedImage) {
+                    handleCloseModal();
+                }
+                else if (isUploadModalOpen) {
+                    handleCloseUploadModal();
+                }
+            }
+        };
+        window.addEventListener("keydown", handleEsc);
+        return function () { return window.removeEventListener("keydown", handleEsc); };
+    }, [isConfirmDeleteOpen, selectedImage, isUploadModalOpen]);
+    var openConfirmDelete = function (documentId) {
+        if (!isAdmin) {
+            setError(GALLERY_SIMPLE.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_SIMPLE.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({ url: image.url });
+    };
+    var handleCloseModal = function () {
+        setSelectedImage(null);
+    };
+    var handleCloseUploadModal = function () {
+        setIsUploadModalOpen(false);
+        setSelectedFile(null);
+        if (fileInputRef.current) {
+            fileInputRef.current.value = "";
+        }
+    };
+    var handleUploadSubmit = function (e) { return __awaiter(_this, void 0, void 0, function () {
+        var err_1;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    e.preventDefault();
+                    if (!isAdmin) {
+                        console.error("GallerySimple: Unauthorized upload attempt", {
+                            isSignedIn: isSignedIn,
+                            businessAdminId: user === null || user === void 0 ? void 0 : user.businessAdminId,
+                        });
+                        setError(GALLERY_SIMPLE.ERRORS.UNAUTHORIZED_UPLOAD);
+                        return [2 /*return*/];
+                    }
+                    if (!selectedFile || selectedFile.size === 0) {
+                        setError(GALLERY_SIMPLE.ERRORS.INVALID_FILE);
+                        return [2 /*return*/];
+                    }
+                    setIsLoading(true);
+                    _a.label = 1;
+                case 1:
+                    _a.trys.push([1, 3, 4, 5]);
+                    return [4 /*yield*/, handleImageUpload(e, selectedFile, "", "", "none")];
+                case 2:
+                    _a.sent();
+                    return [3 /*break*/, 5];
+                case 3:
+                    err_1 = _a.sent();
+                    console.error("GallerySimple: Upload Error", err_1);
+                    setError(err_1 instanceof Error ? err_1.message : GALLERY_SIMPLE.ERRORS.UPLOAD_FAILED);
+                    return [3 /*break*/, 5];
+                case 4:
+                    setIsLoading(false);
+                    setIsUploadModalOpen(false);
+                    setSelectedFile(null);
+                    if (fileInputRef.current) {
+                        fileInputRef.current.value = "";
+                    }
+                    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">
+      <style jsx>{"\n        :root {\n          --jubilee: #F47C7C;\n          --exuberant-blue: #FF54B4;\n          --modern-purple: #D946EF;\n        }\n\n        .glassmorphism {\n          background: rgba(255, 255, 255, 0.08);\n          backdrop-filter: blur(10px);\n          -webkit-backdrop-filter: blur(10px);\n          border: 2px solid transparent;\n          border-image: linear-gradient(45deg, var(--exuberant-blue), var(--jubilee), var(--modern-purple)) 1;\n          box-shadow: 0 16px 48px rgba(0, 0, 0, 0.1);\n        }\n\n        .modal-glassmorphism {\n          background: rgba(255, 255, 255, 0.08);\n          backdrop-filter: blur(10px);\n          -webkit-backdrop-filter: blur(10px);\n          border: 2px solid transparent;\n          border-image: linear-gradient(45deg, var(--exuberant-blue), var(--jubilee), var(--modern-purple)) 1;\n          box-shadow: 0 16px 48px rgba(0, 0, 0, 0.1);\n          border-radius: 2rem;\n          max-height: 90vh;\n          overflow: hidden;\n        }\n\n        @supports not (backdrop-filter: blur(10px)) {\n          .glassmorphism {\n            background: rgba(255, 255, 255, 0.2);\n          }\n          .modal-glassmorphism {\n            background: rgba(255, 255, 255, 0.2);\n          }\n        }\n\n        @media (max-width: 768px) {\n          .glassmorphism {\n            backdrop-filter: none;\n            background: rgba(255, 255, 255, 0.2);\n          }\n          .modal-glassmorphism {\n            padding: 1rem;\n            max-height: 85vh;\n          }\n        }\n\n        .motion-card {\n          will-change: transform, opacity;\n        }\n      "}</style>
+      <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">
+          <TabsList className="grid w-full md:w-3/4 mx-auto grid-cols-2 mb-12 glassmorphism bg-[#1B2743] rounded-[2rem] p-4 h-24 border-0">
+            <TabsTrigger value="photos" className="rounded-[1.5rem] text-xl sm:text-2xl font-bold text-gray-200 data-[state=active]:text-white data-[state=active]:bg-blue-600/90 bg-blue-100/20 backdrop-blur-lg border border-white/10 shadow-md h-full flex items-center justify-center transition-all duration-300 content-text mr-2">
+              {GALLERY_SIMPLE.UI.PHOTOS_TAB}
+            </TabsTrigger>
+            <TabsTrigger value="videos" className="rounded-[1.5rem] text-xl sm:text-2xl font-bold text-gray-200 data-[state=active]:text-white data-[state=active]:bg-blue-600/90 bg-blue-100/20 backdrop-blur-lg border border-white/10 shadow-md h-full flex items-center justify-center transition-all duration-300 content-text ml-2">
+              {GALLERY_SIMPLE.UI.VIDEOS_TAB}
+            </TabsTrigger>
+          </TabsList>
+
+          <TabsContent value="photos">
+            <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_SIMPLE.BUTTONS.UPLOAD_IMAGE_BUTTON}
+                  </ActionButton>
+                </div>)}
+              {uploadedImages.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 }}>
+                    {uploadedImages.slice(0, visiblePhotos).map(function (image, index) { 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 motion-card">
+                        <Card className="overflow-hidden glassmorphism rounded-[1.5rem] shadow-4xl p-2 sm:p-4 relative">
+                          <div className="relative w-full aspect-[3/2]">
+                            <Image src={image.url} alt={GALLERY_SIMPLE.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 && (<TrashIconButton onClick={function (e) {
+                        e.stopPropagation();
+                        openConfirmDelete(image.documentId);
+                    }} aria-label={GALLERY_SIMPLE.UI.DELETE_BUTTON_ARIA.replace("${image.title || image.documentId}", image.title || image.documentId)}/>)}
+                        </Card>
+                      </motion.div>); })}
+                  </motion.div>
+                  {visiblePhotos < uploadedImages.length && (<div className="mt-8 text-center">
+                      <ActionButton onClick={loadMore} className="flex items-center gap-2">
+                        {GALLERY_SIMPLE.BUTTONS.LOAD_MORE_BUTTON}
+                      </ActionButton>
+                    </div>)}
+                </>) : (<p className="text-center text-gray-700 font-bold text-base sm:text-lg md:text-xl">
+                  {GALLERY_SIMPLE.UI.NO_IMAGES_MESSAGE}
+                </p>)}
+              <div className="mt-4 text-center">
+                {authLoading || isLoading ? (<p className="text-gray-400 text-sm font-medium">{GALLERY_SIMPLE.UI.LOADING_MESSAGE}</p>) : isAdmin ? (<p className="text-gray-400 text-sm font-medium">{GALLERY_SIMPLE.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>
+            </div>
+          </TabsContent>
+
+          <TabsContent value="videos">
+            <motion.div className="grid md:grid-cols-2 lg:grid-cols-3 gap-2 sm:gap-4" style={{ y: isMobile ? 0 : parallaxY }}>
+              {videos.map(function (video, index) { return (<motion.div key={index} variants={cardVariants} initial="hidden" whileInView="visible" viewport={{ once: true, amount: 0.2 }} className="motion-card">
+                  <Card className="overflow-hidden glassmorphism rounded-[1.5rem] shadow-4xl p-4">
+                    <div className="relative w-full aspect-[16/9]">
+                      <iframe width="100%" height="100%" src={video.url} title={video.title} allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen className="border-0 rounded-[1rem]" loading="lazy"/>
+                    </div>
+                    <p className="text-gray-700 text-xl sm:text-2xl font-bold mt-4 text-center drop-shadow-md content-text">
+                      {video.title}
+                    </p>
+                  </Card>
+                </motion.div>); })}
+            </motion.div>
+          </TabsContent>
+        </Tabs>
+      </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-4 isolate" onClick={handleCloseModal} role="dialog" aria-modal="true" aria-labelledby="modal-image">
+          <div className="relative max-w-5xl w-full mx-4 p-6 bg-gray-800/50 border border-gray-700/50 rounded-lg shadow-lg max-h-[90vh] overflow-y-auto" 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-[80vh]">
+              <Image src={selectedImage.url} alt={GALLERY_SIMPLE.UI.DEFAULT_IMAGE_ALT} fill className="object-contain rounded-lg" quality={85}/>
+            </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" 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_SIMPLE.UI.DELETE_MODAL_HEADING}
+            </h3>
+            <p className="text-gray-300 text-sm mb-4">
+              {GALLERY_SIMPLE.UI.DELETE_CONFIRMATION_MESSAGE}
+            </p>
+            <div className="flex space-x-3">
+              <DeleteButton onClick={handleConfirmDelete} disabled={isLoading}>
+                {isLoading ? GALLERY_SIMPLE.BUTTONS.DELETING_BUTTON : GALLERY_SIMPLE.BUTTONS.DELETE_BUTTON}
+              </DeleteButton>
+              <CancelButton onClick={handleCancelDelete}/>
+            </div>
+          </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" 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_SIMPLE.UI.UPLOAD_MODAL_HEADING}
+            </h3>
+            <form onSubmit={handleUploadSubmit} className="flex flex-col space-y-4">
+              <input type="file" accept="image/jpeg,image/png,image/gif" onChange={function (e) {
+                var _a;
+                setSelectedFile(((_a = e.target.files) === null || _a === void 0 ? void 0 : _a[0]) || null);
+            }} 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>{selectedFile ? selectedFile.name : GALLERY_SIMPLE.UI.CHOOSE_IMAGE_TEXT}</span>
+                  <Upload className="h-4 w-4"/>
+                </div>
+              </label>
+              <div className="flex space-x-3">
+                <SubmitButton type="submit" disabled={isLoading || !selectedFile}>
+                  {isLoading ? GALLERY_SIMPLE.BUTTONS.UPLOADING_BUTTON : GALLERY_SIMPLE.BUTTONS.UPLOAD_BUTTON}
+                </SubmitButton>
+                <CancelButton onClick={handleCloseUploadModal}/>
+              </div>
+            </form>
+          </div>
+        </motion.div>)}
+    </div>);
+}

package/dist/components/addOns/functional/galleries/constants/galleryComplex.js

@@ -0,0 +1,104 @@
+// components/addOns/functional/galleries/constants/galleryComplex.ts
+// Constants for hardcoded text in GalleryComplex.tsx, organized by purpose
+export var GALLERY_COMPLEX = {
+    // UI Text for GalleryComplex
+    UI: {
+        // TabsTrigger value for photos tab (capitalized in UI)
+        PHOTOS_TAB: "Photos",
+        // TabsTrigger value for videos tab (capitalized in UI)
+        VIDEOS_TAB: "Videos",
+        // Sub-tab value for all images (capitalized in UI)
+        ALL_SUB_TAB: "All",
+        // Sub-tab value for indoor images (capitalized in UI)
+        INDOOR_SUB_TAB: "Indoor",
+        // Sub-tab value for outdoor images (capitalized in UI)
+        OUTDOOR_SUB_TAB: "Outdoor",
+        // Sub-tab value for commercial images (capitalized in UI)
+        COMMERCIAL_SUB_TAB: "Commercial",
+        // Text when no images exist
+        NO_IMAGES_MESSAGE: "No images available.",
+        // Text when loading
+        LOADING_MESSAGE: "Loading...",
+        // Text when admin is logged in
+        ADMIN_LOGGED_IN_MESSAGE: "You are logged in as an admin.",
+        // Default alt text for images
+        DEFAULT_IMAGE_ALT: "Gallery image",
+        // Delete confirmation modal heading
+        DELETE_MODAL_HEADING: "Confirm Deletion",
+        // Delete confirmation message
+        DELETE_CONFIRMATION_MESSAGE: "Are you sure you want to delete this image? This action cannot be undone.",
+        // Upload modal heading
+        UPLOAD_MODAL_HEADING: "Upload Image",
+        // Default text for file input label
+        CHOOSE_IMAGE_TEXT: "Choose an image",
+        // Placeholder for title input in edit/upload forms
+        TITLE_PLACEHOLDER: "Image title (optional)",
+        // Placeholder for description textarea in edit/upload forms
+        DESCRIPTION_PLACEHOLDER: "Image description (optional)",
+        // Category option for none
+        CATEGORY_NONE: "None",
+        // Category option for indoor
+        CATEGORY_INDOOR: "Indoor",
+        // Category option for outdoor
+        CATEGORY_OUTDOOR: "Outdoor",
+        // Category option for commercial
+        CATEGORY_COMMERCIAL: "Commercial",
+        // Edit modal heading
+        EDIT_MODAL_HEADING: "Edit Image",
+        // Video titles for video cards
+        VIDEO_TITLES: [
+            "Race for the Cure 2019",
+            "Race for the Cure 2017",
+            "Race for the Cure 2016",
+            "Race for the Cure 2015",
+            "Race for the Cure 2014",
+            "Race for the Cure 2013",
+            "Absolutely Abs, Part 1",
+            "Absolutely Abs, Part 2",
+            "Absolutely Abs, Part 3",
+            "Absolutely Abs, Part 4",
+            "Absolutely Abs, Part 5",
+            "Fitstop Introduction",
+            "Fitstop 2: Choosing a personal trainer",
+            "Fitstop 3: Help at the office for Trapezius Injuries",
+            "Race for the Cure warmup",
+            "Camp Caiello",
+        ],
+    },
+    // Button Text for GalleryComplex
+    BUTTONS: {
+        // ActionButton text for opening upload modal
+        UPLOAD_IMAGE_BUTTON: "Upload Image",
+        // ActionButton text for loading more images
+        LOAD_MORE_BUTTON: "Load More",
+        // DeleteButton text when loading
+        DELETING_BUTTON: "Deleting...",
+        // DeleteButton text
+        DELETE_BUTTON: "Delete",
+        // SubmitButton text when loading in upload form
+        UPLOADING_BUTTON: "Uploading...",
+        // SubmitButton text in upload form
+        UPLOAD_BUTTON: "Upload",
+        // SubmitButton text when loading in edit form
+        SAVING_BUTTON: "Saving...",
+        // SubmitButton text in edit form
+        SAVE_BUTTON: "Save",
+    },
+    // Error Messages for GalleryComplex
+    ERRORS: {
+        // Error when non-admin tries to delete
+        UNAUTHORIZED_DELETE: "Unauthorized: Only admins can delete images",
+        // Error when non-admin tries to edit
+        UNAUTHORIZED_EDIT: "Unauthorized: Only admins can edit images",
+        // Error when token is missing or invalid
+        AUTHENTICATION_ERROR: "Authentication error. Please log in again.",
+        // Error when edit fails with status code
+        EDIT_FAILED_STATUS: "Failed to update image: ${response.status}",
+        // Generic error when edit fails
+        EDIT_FAILED: "Failed to update image",
+        // Error when non-admin tries to upload
+        UNAUTHORIZED_UPLOAD: "Unauthorized: Only admins can upload images",
+        // Error when upload fails
+        UPLOAD_FAILED: "Failed to upload image",
+    },
+};

package/dist/components/addOns/functional/galleries/constants/gallerySimple.js

@@ -0,0 +1,74 @@
+// components/addOns/functional/galleries/constants/gallerySimple.ts
+// Constants for hardcoded text in GallerySimple.tsx, organized by purpose
+export var GALLERY_SIMPLE = {
+    // UI Text for GallerySimple
+    UI: {
+        // TabsTrigger text for photos tab
+        PHOTOS_TAB: "Photos",
+        // TabsTrigger text for videos tab
+        VIDEOS_TAB: "Videos",
+        // Text when no images exist
+        NO_IMAGES_MESSAGE: "No images available.",
+        // Text when loading
+        LOADING_MESSAGE: "Loading...",
+        // Text when admin is logged in
+        ADMIN_LOGGED_IN_MESSAGE: "You are logged in as an admin.",
+        // Default alt text for images
+        DEFAULT_IMAGE_ALT: "Gallery image",
+        // Delete confirmation modal heading
+        DELETE_MODAL_HEADING: "Confirm Deletion",
+        // Delete confirmation message
+        DELETE_CONFIRMATION_MESSAGE: "Are you sure you want to delete this image? This action cannot be undone.",
+        // Upload modal heading
+        UPLOAD_MODAL_HEADING: "Upload Image",
+        // Default text for file input label
+        CHOOSE_IMAGE_TEXT: "Choose an image",
+        // TrashIconButton aria-label template
+        DELETE_BUTTON_ARIA: "Delete image ${image.title || image.documentId}",
+        // Video titles for video cards
+        VIDEO_TITLES: [
+            "Race for the Cure 2019",
+            "Race for the Cure 2017",
+            "Race for the Cure 2016",
+            "Race for the Cure 2015",
+            "Race for the Cure 2014",
+            "Race for the Cure 2013",
+            "Absolutely Abs, Part 1",
+            "Absolutely Abs, Part 2",
+            "Absolutely Abs, Part 3",
+            "Absolutely Abs, Part 4",
+            "Absolutely Abs, Part 5",
+            "Fitstop Introduction",
+            "Fitstop 2: Choosing a personal trainer",
+            "Fitstop 3: Help at the office for Trapezius Injuries",
+            "Race for the Cure warmup",
+            "Camp Caiello",
+        ],
+    },
+    // Button Text for GallerySimple
+    BUTTONS: {
+        // ActionButton text for opening upload modal
+        UPLOAD_IMAGE_BUTTON: "Upload Image",
+        // ActionButton text for loading more images
+        LOAD_MORE_BUTTON: "Load More",
+        // DeleteButton text when loading
+        DELETING_BUTTON: "Deleting...",
+        // DeleteButton text
+        DELETE_BUTTON: "Delete",
+        // SubmitButton text when loading
+        UPLOADING_BUTTON: "Uploading...",
+        // SubmitButton text
+        UPLOAD_BUTTON: "Upload",
+    },
+    // Error Messages for GallerySimple
+    ERRORS: {
+        // Error when non-admin tries to delete
+        UNAUTHORIZED_DELETE: "Unauthorized: Only admins can delete images",
+        // Error when no file is selected
+        INVALID_FILE: "Please select a valid image file",
+        // Error when non-admin tries to upload
+        UNAUTHORIZED_UPLOAD: "Unauthorized: Only admins can upload images",
+        // Error when upload fails
+        UPLOAD_FAILED: "Failed to upload image",
+    },
+};