@devvistatech/devvista-kit 0.0.1

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

@@ -0,0 +1,604 @@
+"use client";
+
+import { useState, useRef, useEffect, Dispatch, SetStateAction } 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";
+
+interface StrapiUser {
+  id: number;
+  username: string;
+  email: string;
+  businessAdminId?: string;
+}
+
+interface UploadedImage {
+  id: number;
+  documentId: string;
+  title?: string;
+  description?: string;
+  url: string;
+  createdAt: string;
+  category?: "none" | "indoor" | "outdoor" | "commercial";
+}
+
+interface GallerySectionProps {
+  user: StrapiUser | null;
+  authLoading: boolean;
+  uploadedImages: UploadedImage[];
+  setUploadedImages: (images: UploadedImage[]) => void;
+  error: string | null;
+  setError: (error: string | null) => void;
+  isLoading: boolean;
+  setIsLoading: Dispatch<SetStateAction<boolean>>;
+  setUser: Dispatch<SetStateAction<StrapiUser | null>>;
+  handleImageUpload: (
+    e: React.FormEvent<HTMLFormElement>,
+    file: File | null,
+    title: string,
+    description: string,
+    category: "none" | "indoor" | "outdoor" | "commercial"
+  ) => Promise<void>;
+  handleDeleteImage: (documentId: string) => Promise<void>;
+}
+
+export function GallerySection({
+  user,
+  authLoading,
+  uploadedImages,
+  setUploadedImages,
+  error,
+  setError,
+  isLoading,
+  setIsLoading,
+  setUser,
+  handleImageUpload,
+  handleDeleteImage,
+}: GallerySectionProps) {
+  const { isSignedIn } = useUser();
+  const { checkSession } = useStrapiAuth();
+  const isAdmin = isSignedIn && !!user?.businessAdminId;
+  const [activeTab, setActiveTab] = useState("photos");
+  const [selectedImage, setSelectedImage] = useState<{ url: string } | null>(null);
+  const [isMobile, setIsMobile] = useState(false);
+  const [visiblePhotos, setVisiblePhotos] = useState(12);
+  const [isConfirmDeleteOpen, setIsConfirmDeleteOpen] = useState(false);
+  const [isUploadModalOpen, setIsUploadModalOpen] = useState(false);
+  const [documentIdToDelete, setDocumentIdToDelete] = useState<string | null>(null);
+  const [selectedFile, setSelectedFile] = useState<File | null>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const { scrollYProgress } = useScroll({
+    target: containerRef,
+    offset: ["start end", "end start"],
+  });
+  const parallaxY = useTransform(scrollYProgress, [0, 1], [0, -50]);
+
+  const videos = GALLERY_SIMPLE.UI.VIDEO_TITLES.map((title, index) => ({
+    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,
+  }));
+
+  useEffect(() => {
+    const handleLogin = () => checkSession();
+    const handleLogout = () => checkSession();
+    window.addEventListener("user-login", handleLogin);
+    window.addEventListener("user-logout", handleLogout);
+    return () => {
+      window.removeEventListener("user-login", handleLogin);
+      window.removeEventListener("user-logout", handleLogout);
+    };
+  }, [checkSession]);
+
+  useEffect(() => {
+    const checkMobile = () => setIsMobile(window.innerWidth < 768);
+    checkMobile();
+    window.addEventListener("resize", checkMobile);
+    return () => window.removeEventListener("resize", checkMobile);
+  }, []);
+
+  useEffect(() => {
+    if (selectedImage || isConfirmDeleteOpen || isUploadModalOpen) {
+      document.body.classList.add("overflow-hidden");
+    } else {
+      document.body.classList.remove("overflow-hidden");
+    }
+    return () => {
+      document.body.classList.remove("overflow-hidden");
+    };
+  }, [selectedImage, isConfirmDeleteOpen, isUploadModalOpen]);
+
+  useEffect(() => {
+    const event = new CustomEvent("modalStateChange", {
+      detail: { isOpen: !!selectedImage || isConfirmDeleteOpen || isUploadModalOpen },
+    });
+    window.dispatchEvent(event);
+  }, [selectedImage, isConfirmDeleteOpen, isUploadModalOpen]);
+
+  useEffect(() => {
+    const handleEsc = (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        if (isConfirmDeleteOpen) {
+          handleCancelDelete();
+        } else if (selectedImage) {
+          handleCloseModal();
+        } else if (isUploadModalOpen) {
+          handleCloseUploadModal();
+        }
+      }
+    };
+    window.addEventListener("keydown", handleEsc);
+    return () => window.removeEventListener("keydown", handleEsc);
+  }, [isConfirmDeleteOpen, selectedImage, isUploadModalOpen]);
+
+  const openConfirmDelete = (documentId: string) => {
+    if (!isAdmin) {
+      setError(GALLERY_SIMPLE.ERRORS.UNAUTHORIZED_DELETE);
+      return;
+    }
+    setDocumentIdToDelete(documentId);
+    setIsConfirmDeleteOpen(true);
+  };
+
+  const handleConfirmDelete = async () => {
+    if (!isAdmin) {
+      setError(GALLERY_SIMPLE.ERRORS.UNAUTHORIZED_DELETE);
+      setIsConfirmDeleteOpen(false);
+      return;
+    }
+    if (documentIdToDelete !== null) {
+      setIsLoading(true);
+      try {
+        await handleDeleteImage(documentIdToDelete);
+      } finally {
+        setIsLoading(false);
+        setIsConfirmDeleteOpen(false);
+        setDocumentIdToDelete(null);
+      }
+    }
+  };
+
+  const handleCancelDelete = () => {
+    setIsConfirmDeleteOpen(false);
+    setDocumentIdToDelete(null);
+  };
+
+  const handleImageClick = (image: UploadedImage) => {
+    setSelectedImage({ url: image.url });
+  };
+
+  const handleCloseModal = () => {
+    setSelectedImage(null);
+  };
+
+  const handleCloseUploadModal = () => {
+    setIsUploadModalOpen(false);
+    setSelectedFile(null);
+    if (fileInputRef.current) {
+      fileInputRef.current.value = "";
+    }
+  };
+
+  const handleUploadSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    if (!isAdmin) {
+      console.error("GallerySimple: Unauthorized upload attempt", {
+        isSignedIn,
+        businessAdminId: user?.businessAdminId,
+      });
+      setError(GALLERY_SIMPLE.ERRORS.UNAUTHORIZED_UPLOAD);
+      return;
+    }
+    if (!selectedFile || selectedFile.size === 0) {
+      setError(GALLERY_SIMPLE.ERRORS.INVALID_FILE);
+      return;
+    }
+    setIsLoading(true);
+    try {
+      await handleImageUpload(e, selectedFile, "", "", "none");
+    } catch (err) {
+      console.error("GallerySimple: Upload Error", err);
+      setError(err instanceof Error ? err.message : GALLERY_SIMPLE.ERRORS.UPLOAD_FAILED);
+    } finally {
+      setIsLoading(false);
+      setIsUploadModalOpen(false);
+      setSelectedFile(null);
+      if (fileInputRef.current) {
+        fileInputRef.current.value = "";
+      }
+    }
+  };
+
+  const loadMore = () => {
+    setVisiblePhotos((prev) => prev + 12);
+  };
+
+  const sectionVariants = {
+    hidden: { opacity: 0 },
+    visible: {
+      opacity: 1,
+      transition: { duration: 0.8, ease: [0.16, 1, 0.3, 1], staggerChildren: 0.1 },
+    },
+  };
+
+  const cardVariants = {
+    hidden: { opacity: 0, y: 30 },
+    visible: {
+      opacity: 1,
+      y: 0,
+      transition: { duration: 0.5 },
+    },
+  };
+
+  const 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>{`
+        :root {
+          --jubilee: #F47C7C;
+          --exuberant-blue: #FF54B4;
+          --modern-purple: #D946EF;
+        }
+
+        .glassmorphism {
+          background: rgba(255, 255, 255, 0.08);
+          backdrop-filter: blur(10px);
+          -webkit-backdrop-filter: blur(10px);
+          border: 2px solid transparent;
+          border-image: linear-gradient(45deg, var(--exuberant-blue), var(--jubilee), var(--modern-purple)) 1;
+          box-shadow: 0 16px 48px rgba(0, 0, 0, 0.1);
+        }
+
+        .modal-glassmorphism {
+          background: rgba(255, 255, 255, 0.08);
+          backdrop-filter: blur(10px);
+          -webkit-backdrop-filter: blur(10px);
+          border: 2px solid transparent;
+          border-image: linear-gradient(45deg, var(--exuberant-blue), var(--jubilee), var(--modern-purple)) 1;
+          box-shadow: 0 16px 48px rgba(0, 0, 0, 0.1);
+          border-radius: 2rem;
+          max-height: 90vh;
+          overflow: hidden;
+        }
+
+        @supports not (backdrop-filter: blur(10px)) {
+          .glassmorphism {
+            background: rgba(255, 255, 255, 0.2);
+          }
+          .modal-glassmorphism {
+            background: rgba(255, 255, 255, 0.2);
+          }
+        }
+
+        @media (max-width: 768px) {
+          .glassmorphism {
+            backdrop-filter: none;
+            background: rgba(255, 255, 255, 0.2);
+          }
+          .modal-glassmorphism {
+            padding: 1rem;
+            max-height: 85vh;
+          }
+        }
+
+        .motion-card {
+          will-change: transform, opacity;
+        }
+      `}</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={() => 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((image, index) => (
+                      <motion.div
+                        key={image.documentId}
+                        variants={cardVariants}
+                        initial="hidden"
+                        whileInView="visible"
+                        viewport={{ once: true, amount: 0.2 }}
+                        onClick={() => 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={(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((video, index) => (
+                <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={(e) => 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={(e) => 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={(e) => 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={(e) => {
+                  setSelectedFile(e.target.files?.[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>
+  );
+}