@devvistatech/devvista-kit 0.0.10 → 0.0.13

package/components/addOns/functional/galleries/ThreeSetGallery.tsx

@@ -0,0 +1,260 @@
+"use client";
+
+import { useState, useEffect, useRef } from "react";
+import Image from "next/image";
+import { UploadedImage } from "@/lib/types";
+import Spinner from "@/components/addOns/non-functional/spinner";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { motion } from "framer-motion";
+
+interface ThreeSetGalleryProps {
+  columns?: "1" | "2" | "3" | "4";
+}
+
+const ThreeSetGallery = ({ columns = "3" }: ThreeSetGalleryProps) => {
+  const [uploadedImages, setUploadedImages] = useState<UploadedImage[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [currentSlide, setCurrentSlide] = useState(0);
+  const slideshowRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const fetchImages = async () => {
+      setIsLoading(true);
+      try {
+        const response = await fetch(`/api/gallery-data?t=${Date.now()}`, {
+          headers: { "Content-Type": "application/json" },
+          cache: "no-store",
+        });
+        if (response.ok) {
+          const result = await response.json();
+          setUploadedImages(
+            result.data.map((image: any) => ({
+              id: image.id,
+              documentId: image.documentId,
+              title: image.title || "Untitled",
+              description: image.description || "",
+              url: image.url,
+              createdAt: image.createdAt,
+              category: image.category || "none",
+              favorite: image.favorite || false,
+            })) || []
+          );
+        } else {
+          console.error("ThreeSetGallery: Gallery API Error", {
+            status: response.status,
+            statusText: response.statusText,
+          });
+        }
+      } catch (err) {
+        console.error("ThreeSetGallery: Fetch Error", err);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+    fetchImages();
+  }, []);
+
+  // Filter favorite images
+  const favoriteImages = uploadedImages.filter((image) => image.favorite === true);
+
+  const truncateDescription = (description: string | undefined): string => {
+    if (!description) return "No description available".slice(0, 250) + "...";
+    return description.length > 250
+      ? description.slice(0, 250) + "..."
+      : description + "...";
+  };
+
+  const goToPrev = () => setCurrentSlide((prev) => (prev - 1 + (favoriteImages.length === 2 ? 1 : favoriteImages.length)) % (favoriteImages.length === 2 ? 1 : favoriteImages.length));
+  const goToNext = () => setCurrentSlide((prev) => (prev + 1) % (favoriteImages.length === 2 ? 1 : favoriteImages.length));
+
+  if (isLoading) {
+    return <Spinner />;
+  }
+
+  return (
+    <section className="w-full" data-testid="three-set-gallery">
+      <div className="w-full px-4 sm:px-6">
+        {favoriteImages.length === 0 ? (
+          <p className="text-center text-gray-700 font-medium text-base sm:text-lg mb-4">
+            No content available
+          </p>
+        ) : (
+          <>
+            {/* Desktop: Grid Layout */}
+            <div
+              className={`hidden md:grid grid-cols-${columns} gap-4 sm:gap-6`}
+              data-testid="desktop-grid"
+            >
+              {favoriteImages.map((image, index) => (
+                <div
+                  key={image.documentId || `image-${index}`}
+                  className="relative overflow-hidden group w-full aspect-[4/3] rounded-3xl bg-white/10 backdrop-blur-lg border-2 border-transparent shadow-xl"
+                  data-testid={`gallery-image-${index}`}
+                >
+                  <Image
+                    src={image.url}
+                    alt={
+                      image.title?.trim() &&
+                      !image.title.match(/Image \d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z/)
+                        ? image.title
+                        : `Services Image ${index + 1}`
+                    }
+                    fill
+                    className="object-cover rounded-2xl transition-transform duration-700 group-hover:scale-110"
+                    quality={85}
+                    priority={index === 0}
+                    loading={index === 0 ? "eager" : "lazy"}
+                    sizes="(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 33vw"
+                    onError={() => console.error(`ThreeSetGallery: Image failed to load: ${image.url}`)}
+                  />
+                  <div className="absolute inset-0 flex flex-col items-center justify-center bg-black/50 text-white opacity-0 group-hover:opacity-100 transition-opacity duration-300 p-4 sm:p-8">
+                    <h3 className="text-lg sm:text-xl font-bold">
+                      {image.title?.trim() &&
+                      !image.title.match(/Image \d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z/)
+                        ? image.title
+                        : `Image ${index + 1}`}
+                    </h3>
+                    <p className="text-sm sm:text-base">{truncateDescription(image.description)}</p>
+                  </div>
+                </div>
+              ))}
+            </div>
+
+            {/* Mobile: Carousel Layout */}
+            <div
+              className={`md:hidden relative h-[40vh] min-h-[400px] sm:h-[50vh] rounded-3xl overflow-hidden bg-white/10 backdrop-blur-lg border-2 border-transparent shadow-xl w-full ${favoriteImages.length === 2 ? '' : 'mx-auto max-w-3xl'} supports-[not(backdrop-filter:blur(10px))]:bg-white/20`}
+              data-testid="mobile-carousel"
+              ref={slideshowRef}
+            >
+              {favoriteImages.length === 1 ? (
+                <div
+                  className="relative w-full h-full"
+                  data-testid="carousel-image-0"
+                >
+                  <Image
+                    src={favoriteImages[0].url}
+                    alt={
+                      favoriteImages[0].title?.trim() &&
+                      !favoriteImages[0].title.match(/Image \d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z/)
+                        ? favoriteImages[0].title
+                        : "Services Image 1"
+                    }
+                    fill
+                    className="object-cover rounded-2xl transition-transform duration-700 hover:scale-110"
+                    quality={85}
+                    priority
+                    sizes="100vw"
+                    onError={() => console.error(`ThreeSetGallery: Image failed to load: ${favoriteImages[0].url}`)}
+                  />
+                  <div className="absolute inset-0 flex flex-col items-center justify-center bg-black/50 text-white opacity-0 hover:opacity-100 transition-opacity duration-300 p-4">
+                    <h3 className="text-lg font-bold">
+                      {favoriteImages[0].title?.trim() &&
+                      !favoriteImages[0].title.match(/Image \d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z/)
+                        ? favoriteImages[0].title
+                        : "Image 1"}
+                    </h3>
+                    <p className="text-sm">{truncateDescription(favoriteImages[0].description)}</p>
+                  </div>
+                </div>
+              ) : favoriteImages.length === 2 ? (
+                <div className="relative w-full h-full flex" data-testid="carousel-two-images">
+                  {favoriteImages.map((image, index) => (
+                    <div
+                      key={image.documentId || `image-${index}`}
+                      className="relative w-1/2 h-full"
+                      data-testid={`carousel-image-${index}`}
+                    >
+                      <Image
+                        src={image.url}
+                        alt={
+                          image.title?.trim() &&
+                          !image.title.match(/Image \d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z/)
+                            ? image.title
+                            : `Services Image ${index + 1}`
+                        }
+                        fill
+                        className="object-cover rounded-2xl transition-transform duration-700 hover:scale-110"
+                        quality={85}
+                        priority={index === 0}
+                        sizes="50vw"
+                        onError={() => console.error(`ThreeSetGallery: Image failed to load: ${image.url}`)}
+                      />
+                      <div className="absolute inset-0 flex flex-col items-center justify-center bg-black/50 text-white opacity-0 hover:opacity-100 transition-opacity duration-300 p-2">
+                        <h3 className="text-sm font-bold">
+                          {image.title?.trim() &&
+                          !image.title.match(/Image \d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z/)
+                            ? image.title
+                            : `Image ${index + 1}`}
+                        </h3>
+                        <p className="text-xs">{truncateDescription(image.description)}</p>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              ) : (
+                <>
+                  <motion.div
+                    key={currentSlide}
+                    initial={{ opacity: 0, x: 50 }}
+                    animate={{ opacity: 1, x: 0 }}
+                    exit={{ opacity: 0, x: -50 }}
+                    transition={{ duration: 0.5, ease: [0.16, 1, 0.3, 1] }}
+                    className="relative w-full h-full"
+                    data-testid={`carousel-image-${currentSlide}`}
+                  >
+                    <Image
+                      src={favoriteImages[currentSlide].url}
+                      alt={
+                        favoriteImages[currentSlide].title?.trim() &&
+                        !favoriteImages[currentSlide].title.match(/Image \d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z/)
+                          ? favoriteImages[currentSlide].title
+                          : `Services Image ${currentSlide + 1}`
+                      }
+                      fill
+                      className="object-cover rounded-2xl transition-transform duration-700 hover:scale-110"
+                      quality={85}
+                      priority={currentSlide === 0}
+                      sizes="100vw"
+                      onError={() => console.error(`ThreeSetGallery: Image failed to load: ${favoriteImages[currentSlide].url}`)}
+                    />
+                    <div className="absolute inset-0 flex flex-col items-center justify-center bg-black/50 text-white opacity-0 hover:opacity-100 transition-opacity duration-300 p-4">
+                      <h3 className="text-lg font-bold">
+                        {favoriteImages[currentSlide].title?.trim() &&
+                        !favoriteImages[currentSlide].title.match(/Image \d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z/)
+                          ? favoriteImages[currentSlide].title
+                          : `Image ${currentSlide + 1}`}
+                      </h3>
+                      <p className="text-sm">{truncateDescription(favoriteImages[currentSlide].description)}</p>
+                    </div>
+                  </motion.div>
+                  <button
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      goToPrev();
+                    }}
+                    className="absolute left-2 top-1/2 transform -translate-y-1/2 bg-gray-800/60 hover:bg-gray-800/80 text-white p-2 rounded-full transition-colors duration-300"
+                    aria-label="Previous slide"
+                  >
+                    <ChevronLeft className="h-6 w-6" />
+                  </button>
+                  <button
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      goToNext();
+                    }}
+                    className="absolute right-2 top-1/2 transform -translate-y-1/2 bg-gray-800/60 hover:bg-gray-800/80 text-white p-2 rounded-full transition-colors duration-300"
+                    aria-label="Next slide"
+                  >
+                    <ChevronRight className="h-6 w-6" />
+                  </button>
+                </>
+              )}
+            </div>
+          </>
+        )}
+      </div>
+    </section>
+  );
+};
+
+export default ThreeSetGallery;

package/components/addOns/functional/galleries/constants/galleryComplex.ts

@@ -1,107 +1,107 @@
-// components/addOns/functional/galleries/constants/galleryComplex.ts
-// Constants for hardcoded text in GalleryComplex.tsx, organized by purpose
-
-export const 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 New 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",
-    // No videos available message
-    NO_VIDEOS_MESSAGE: "No videos are available",
-    // Video titles for video cards
-    VIDEO_TITLES: [
-      "Lorem ipsum dolor sit ame",
-      "Lorem ipsum dolor sit ame",
-      "Lorem ipsum dolor sit ame",
-      "Lorem ipsum dolor sit ame",
-      "Lorem ipsum dolor sit ame",
-      "Lorem ipsum dolor sit ame",
-      "Lorem ipsum dolor sit ame",
-      "Lorem ipsum dolor sit ame",
-      "Lorem ipsum dolor sit ame",
-      "Lorem ipsum dolor sit ame",
-      "Lorem ipsum dolor sit ame",
-      "Lorem ipsum dolor sit ame",
-      "Lorem ipsum dolor sit ame",
-      "Lorem ipsum dolor sit ame",
-      "Lorem ipsum dolor sit ame",
-      "Lorem ipsum dolor sit ame",
-    ],
-  },
-  // Button Text for GalleryComplex
-  BUTTONS: {
-    // ActionButton text for opening upload modal
-    UPLOAD_IMAGE_BUTTON: "Upload New 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 New Images",
-    // Error when upload fails
-    UPLOAD_FAILED: "Failed to Upload New Image",
-  },
+// components/addOns/functional/galleries/constants/galleryComplex.ts
+// Constants for hardcoded text in GalleryComplex.tsx, organized by purpose
+
+export const 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 New 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",
+    // No videos available message
+    NO_VIDEOS_MESSAGE: "No videos are available",
+    // Video titles for video cards
+    VIDEO_TITLES: [
+      "Lorem ipsum dolor sit ame",
+      "Lorem ipsum dolor sit ame",
+      "Lorem ipsum dolor sit ame",
+      "Lorem ipsum dolor sit ame",
+      "Lorem ipsum dolor sit ame",
+      "Lorem ipsum dolor sit ame",
+      "Lorem ipsum dolor sit ame",
+      "Lorem ipsum dolor sit ame",
+      "Lorem ipsum dolor sit ame",
+      "Lorem ipsum dolor sit ame",
+      "Lorem ipsum dolor sit ame",
+      "Lorem ipsum dolor sit ame",
+      "Lorem ipsum dolor sit ame",
+      "Lorem ipsum dolor sit ame",
+      "Lorem ipsum dolor sit ame",
+      "Lorem ipsum dolor sit ame",
+    ],
+  },
+  // Button Text for GalleryComplex
+  BUTTONS: {
+    // ActionButton text for opening upload modal
+    UPLOAD_IMAGE_BUTTON: "Upload New 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 New Images",
+    // Error when upload fails
+    UPLOAD_FAILED: "Failed to Upload New Image",
+  },
 };

package/components/addOns/functional/galleries/constants/gallerySimple.ts

@@ -1,77 +1,77 @@
-// components/addOns/functional/galleries/constants/gallerySimple.ts
-// Constants for hardcoded text in GallerySimple.tsx, organized by purpose
-
-export const 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 New 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}",
-    // No videos available message
-    NO_VIDEOS_MESSAGE: "No videos are available",
-    // Video titles for video cards
-    VIDEO_TITLES: [
-      "Lorem ipsum dolor sit ame",
-      "Lorem ipsum dolor sit ame",
-      "Lorem ipsum dolor sit ame",
-      "Lorem ipsum dolor sit ame",
-      "Lorem ipsum dolor sit ame",
-      "Lorem ipsum dolor sit ame",
-      "Lorem ipsum dolor sit ame",
-      "Lorem ipsum dolor sit ame",
-      "Lorem ipsum dolor sit ame",
-      "Lorem ipsum dolor sit ame",
-      "Lorem ipsum dolor sit ame",
-      "Lorem ipsum dolor sit ame",
-      "Lorem ipsum dolor sit ame",
-      "Lorem ipsum dolor sit ame",
-      "Lorem ipsum dolor sit ame",
-      "Lorem ipsum dolor sit ame",
-    ],
-  },
-  // Button Text for GallerySimple
-  BUTTONS: {
-    // ActionButton text for opening upload modal
-    UPLOAD_IMAGE_BUTTON: "Upload New 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 New Images",
-    // Error when upload fails
-    UPLOAD_FAILED: "Failed to Upload New Image",
-  },
+// components/addOns/functional/galleries/constants/gallerySimple.ts
+// Constants for hardcoded text in GallerySimple.tsx, organized by purpose
+
+export const 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 New 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}",
+    // No videos available message
+    NO_VIDEOS_MESSAGE: "No videos are available",
+    // Video titles for video cards
+    VIDEO_TITLES: [
+      "Lorem ipsum dolor sit ame",
+      "Lorem ipsum dolor sit ame",
+      "Lorem ipsum dolor sit ame",
+      "Lorem ipsum dolor sit ame",
+      "Lorem ipsum dolor sit ame",
+      "Lorem ipsum dolor sit ame",
+      "Lorem ipsum dolor sit ame",
+      "Lorem ipsum dolor sit ame",
+      "Lorem ipsum dolor sit ame",
+      "Lorem ipsum dolor sit ame",
+      "Lorem ipsum dolor sit ame",
+      "Lorem ipsum dolor sit ame",
+      "Lorem ipsum dolor sit ame",
+      "Lorem ipsum dolor sit ame",
+      "Lorem ipsum dolor sit ame",
+      "Lorem ipsum dolor sit ame",
+    ],
+  },
+  // Button Text for GallerySimple
+  BUTTONS: {
+    // ActionButton text for opening upload modal
+    UPLOAD_IMAGE_BUTTON: "Upload New 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 New Images",
+    // Error when upload fails
+    UPLOAD_FAILED: "Failed to Upload New Image",
+  },
 };