@devvistatech/devvista-kit 0.0.12 → 0.0.13

package/components/addOns/functional/BioEditor.tsx

@@ -1,447 +0,0 @@
-"use client";
-
-import { motion } from "framer-motion";
-import Image from "next/image";
-import { useState, useEffect } from "react";
-import { EditIconButton, ToggleButton, UpdateButton, CancelButton, CloseButton } from "@/components/other/button";
-import Spinner from "@/components/addOns/non-functional/spinner";
-import { X } from "lucide-react";
-
-interface BioContent {
-  id: number;
-  documentId: string;
-  title: string;
-  description: string;
-  bio: boolean;
-  image?: { url: string; id: number };
-  createdAt: string;
-}
-
-interface StrapiUser {
-  id: number;
-  username: string;
-  email: string;
-  businessAdminId?: string;
-}
-
-interface BioSectionProps {
-  user: StrapiUser | null;
-  authLoading: boolean;
-  bioImageUrl: string | null;
-  bioText: string | null;
-  bioTitle: string | null;
-  error: string | null;
-  isLoading: boolean;
-  setBioImageUrl: (url: string | null) => void;
-  setBioText: (text: string | null) => void;
-  setBioTitle: (title: string | null) => void;
-  setError: (error: string | null) => void;
-  handlePatchSubmit: (
-    e: React.FormEvent,
-    formTitle: string,
-    formDescription: string,
-    formImage: File | null,
-    onSuccess: () => void
-  ) => Promise<void>;
-}
-
-export function BioSection({
-  user,
-  authLoading,
-  bioImageUrl,
-  bioText,
-  bioTitle,
-  error,
-  isLoading,
-  setBioImageUrl,
-  setBioText,
-  setBioTitle,
-  setError,
-  handlePatchSubmit,
-}: BioSectionProps) {
-  const [isMobile, setIsMobile] = useState(false);
-  const [isEditModalOpen, setIsEditModalOpen] = useState(false);
-  const [formTitle, setFormTitle] = useState<string>(bioTitle || "");
-  const [formDescription, setFormDescription] = useState<string>(bioText || "");
-  const [formImage, setFormImage] = useState<File | null>(null);
-  const [isSubmitting, setIsSubmitting] = useState(false);
-  const [isExpanded, setIsExpanded] = useState(false);
-
-  useEffect(() => {
-    const debounce = (fn: () => void, delay: number) => {
-      let timeout: NodeJS.Timeout;
-      return () => {
-        clearTimeout(timeout);
-        timeout = setTimeout(fn, delay);
-      };
-    };
-
-    const checkMobile = debounce(() => {
-      setIsMobile(window.innerWidth < 768);
-    }, 100);
-
-    checkMobile();
-    window.addEventListener("resize", checkMobile);
-    return () => window.removeEventListener("resize", checkMobile);
-  }, []);
-
-  useEffect(() => {
-    const event = new CustomEvent("modalStateChange", {
-      detail: { isOpen: isEditModalOpen },
-    });
-    window.dispatchEvent(event);
-  }, [isEditModalOpen]);
-
-  useEffect(() => {
-    if (isEditModalOpen) {
-      // Store current scroll position
-      const scrollY = window.scrollY;
-      // Prevent background scrolling
-      document.body.style.position = "fixed";
-      document.body.style.top = `-${scrollY}px`;
-      document.body.style.width = "100%";
-      document.body.classList.add("overflow-hidden");
-
-      return () => {
-        // Restore scroll position and remove styles
-        const scrollYRestored = parseInt(document.body.style.top || "0", 10) * -1;
-        document.body.style.position = "";
-        document.body.style.top = "";
-        document.body.style.width = "";
-        document.body.classList.remove("overflow-hidden");
-        window.scrollTo(0, scrollYRestored);
-      };
-    }
-  }, [isEditModalOpen]);
-
-  const openEditModal = () => {
-    setFormTitle(bioTitle || "");
-    setFormDescription(bioText || "");
-    setFormImage(null);
-    setIsEditModalOpen(true);
-  };
-
-  const handleCancelEdit = () => {
-    setIsEditModalOpen(false);
-    setFormTitle(bioTitle || "");
-    setFormDescription(bioText || "");
-    setFormImage(null);
-  };
-
-  useEffect(() => {
-    const handleEsc = (e: KeyboardEvent) => {
-      if (e.key === "Escape" && isEditModalOpen) {
-        handleCancelEdit();
-      }
-    };
-    window.addEventListener("keydown", handleEsc);
-    return () => window.removeEventListener("keydown", handleEsc);
-  }, [isEditModalOpen]);
-
-  const isAdmin = !!user?.businessAdminId;
-
-  const sectionVariants = {
-    hidden: { opacity: 0, y: 20 },
-    visible: {
-      opacity: 1,
-      y: 0,
-      transition: { duration: isMobile ? 0.3 : 0.5, ease: "easeOut" },
-    },
-  };
-
-  const itemVariants = {
-    hidden: { opacity: 0, y: 10 },
-    visible: {
-      opacity: 1,
-      y: 0,
-      transition: { duration: isMobile ? 0.3 : 0.5, ease: "easeOut" },
-    },
-  };
-
-  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" } },
-  };
-
-  const paragraphs = bioText
-    ? bioText.split("\n").filter((paragraph) => paragraph.trim() !== "")
-    : [];
-
-  return (
-    <div className="w-full">
-      <style jsx>{`
-        :root {
-          --jubilee: #F47C7C;
-          --exuberant-blue: #FF69B4;
-          --modern-purple: #D946EF;
-          --green-primary: #1a3c34;
-        }
-
-        .glassmorphism {
-          background: rgba(255, 255, 255, 0.08);
-          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-form {
-          max-height: 90vh;
-          overflow-y: auto;
-          -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
-        }
-
-        .modal-form input,
-        .modal-form textarea {
-          font-size: 0.875rem;
-          padding: 0.5rem;
-          border-radius: 0.375rem;
-          background: #374151;
-          color: #f3f4f6;
-          border: 1px solid #4b5563;
-        }
-
-        .modal-form input:focus,
-        .modal-form textarea:focus {
-          outline: none;
-          ring: 2px solid #3b82f6;
-        }
-
-        .modal-form label {
-          font-size: 0.875rem;
-          color: #d1d5db;
-        }
-
-        body.overflow-hidden {
-          overflow: hidden;
-        }
-
-        @supports not (backdrop-filter: blur(10px)) {
-          .glassmorphism {
-            background: rgba(255, 255, 255, 0.2);
-          }
-        }
-
-        @media (max-width: 768px) {
-          .glassmorphism {
-            backdrop-filter: none;
-            background: rgba(255, 255, 255, 0.2);
-          }
-
-          .modal-form input,
-          .modal-form textarea {
-            font-size: 0.875rem;
-            padding: 0.5rem;
-            border-radius: 0.375rem;
-          }
-
-          .modal-form label {
-            font-size: 0.875rem;
-          }
-
-          .modal-form .flex {
-            flex-direction: column;
-            gap: 0.5rem;
-          }
-
-          .modal-form textarea {
-            min-height: 80px;
-          }
-        }
-
-        @media (max-width: 320px) {
-          .modal-form input,
-          .modal-form textarea {
-            font-size: 0.75rem;
-            padding: 0.5rem;
-          }
-
-          .modal-form label {
-            font-size: 0.75rem;
-          }
-        }
-      `}</style>
-      <motion.div
-        variants={sectionVariants}
-        initial="hidden"
-        animate="visible"
-        className="mb-24 max-w-[200rem] mx-auto px-8 sm:px-10"
-      >
-        <div className="flex flex-col md:flex-row gap-10 items-start min-h-[fit-content]">
-          <motion.div
-            variants={itemVariants}
-            className="relative h-[40vh] min-h-[400px] sm:h-[50vh] lg:h-[600px] rounded-[1.5rem] overflow-hidden glassmorphism w-full mx-auto max-w-3xl md:max-w-none md:mx-0"
-          >
-            {bioImageUrl ? (
-              <div className="relative w-full h-full">
-                <Image
-                  src={bioImageUrl}
-                  alt="Portrait of Kathy Caiello"
-                  fill
-                  className="object-cover rounded-[1rem] transition-transform duration-700 hover:scale-110"
-                  sizes="(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 33vw"
-                  loading="lazy"
-                  quality={85}
-                />
-                <div className="absolute inset-0 bg-gradient-to-t from-black/40 to-transparent opacity-0 hover:opacity-100 transition-opacity duration-500"></div>
-                {isAdmin && (
-                  <div className="absolute top-2 right-0 flex">
-                    <EditIconButton
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        openEditModal();
-                      }}
-                    />
-                  </div>
-                )}
-              </div>
-            ) : (
-              <div className="w-full h-full flex items-center justify-center">
-                <p className="text-gray-600 text-lg">No image available</p>
-              </div>
-            )}
-          </motion.div>
-          <motion.div
-            variants={itemVariants}
-            className="space-y-6 min-h-[fit-content] h-auto w-full relative"
-          >
-            {bioTitle && (
-              <motion.h2
-                variants={itemVariants}
-                className="text-2xl sm:text-3xl font-bold text-gray-800"
-              >
-                {bioTitle}
-              </motion.h2>
-            )}
-            {paragraphs.length > 0 ? (
-              <>
-                {paragraphs
-                  .slice(0, isExpanded ? paragraphs.length : 3)
-                  .map((paragraph, index) => (
-                    <motion.p
-                      key={index}
-                      variants={itemVariants}
-                      className="text-gray-800 text-base sm:text-lg md:text-xl leading-relaxed font-medium"
-                    >
-                      {paragraph}
-                    </motion.p>
-                  ))}
-                {paragraphs.length > 3 && (
-                  <motion.div variants={itemVariants} className="mt-4">
-                    <ToggleButton
-                      variant="toggle-bio"
-                      onClick={() => setIsExpanded(!isExpanded)}
-                    >
-                      {isExpanded ? "Read Less" : "Read More"}
-                    </ToggleButton>
-                  </motion.div>
-                )}
-              </>
-            ) : (
-              <motion.p
-                variants={itemVariants}
-                className="text-gray-600 text-base sm:text-lg md:text-xl leading-relaxed font-medium"
-              >
-                No bio description available.
-              </motion.p>
-            )}
-          </motion.div>
-        </div>
-        {error && (
-          <p className="text-red-400 text-base sm:text-lg md:text-xl text-center mt-4">{error}</p>
-        )}
-      </motion.div>
-      {isEditModalOpen && (
-        <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={handleCancelEdit}
-          aria-modal="true"
-          role="dialog"
-        >
-          <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 modal-form"
-            onClick={(e) => e.stopPropagation()}
-          >
-            <CloseButton onClick={handleCancelEdit}>
-              <X className="h-6 w-6 sm:h-8 sm:w-8" />
-            </CloseButton>
-            <h3 className="text-xl font-bold text-white mb-4">Edit Bio</h3>
-            <form
-              onSubmit={(e) => {
-                setIsSubmitting(true);
-                handlePatchSubmit(e, formTitle, formDescription, formImage, () => {
-                  setIsEditModalOpen(false);
-                }).finally(() => setIsSubmitting(false));
-              }}
-              className="space-y-4 modal-form"
-            >
-              <div>
-                <label
-                  htmlFor="bioTitle"
-                  className="block text-sm font-medium text-gray-300 mb-1"
-                >
-                  Bio Title
-                </label>
-                <input
-                  id="bioTitle"
-                  type="text"
-                  value={formTitle}
-                  onChange={(e) => setFormTitle(e.target.value)}
-                  className="w-full p-2 rounded bg-gray-700 text-white border border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm"
-                  placeholder="Enter the bio title"
-                />
-              </div>
-              <div>
-                <label
-                  htmlFor="bioImage"
-                  className="block text-sm font-medium text-gray-300 mb-1"
-                >
-                  Update Image (optional)
-                </label>
-                <input
-                  id="bioImage"
-                  type="file"
-                  accept="image/jpeg,image/png,image/gif"
-                  onChange={(e) => setFormImage(e.target.files?.[0] || null)}
-                  className="w-full p-2 rounded bg-gray-700 text-white border border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm"
-                />
-                {formImage && (
-                  <p className="mt-2 text-gray-300 text-sm">Selected: {formImage.name}</p>
-                )}
-              </div>
-              <div>
-                <label
-                  htmlFor="bioDescription"
-                  className="block text-sm font-medium text-gray-300 mb-1"
-                >
-                  Update Description
-                </label>
-                <textarea
-                  id="bioDescription"
-                  value={formDescription}
-                  onChange={(e) => setFormDescription(e.target.value)}
-                  className="w-full p-2 rounded bg-gray-700 text-white border border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm min-h-[80px]"
-                  placeholder="Enter the bio description"
-                />
-              </div>
-              <div className="flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-3">
-                <UpdateButton type="submit" disabled={isSubmitting}>
-                  {isSubmitting ? "Saving..." : "Update"}
-                </UpdateButton>
-                <CancelButton type="button" onClick={handleCancelEdit}>
-                  Cancel
-                </CancelButton>
-              </div>
-              {error && <p className="text-red-400 text-sm font-medium">{error}</p>}
-            </form>
-          </div>
-        </motion.div>
-      )}
-    </div>
-  );
-}