@devvistatech/devvista-kit 0.0.10 → 0.0.12

package/components/addOns/functional/BioEditor.tsx

@@ -1,447 +1,447 @@
-"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>
-  );
+"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>
+  );
 }