Gallery block and display

JeremyG11 · Jan 16, 2024 · d308837 · d308837
1 parent d5da29d
commit d308837
Show file tree

Hide file tree

Showing 7 changed files with 106 additions and 56 deletions.
diff --git a/components/Profile/AddBlock.tsx b/components/Profile/AddBlock.tsx
@@ -30,10 +30,12 @@ export const AddBlock = () => {
       >
         <button
           onClick={handleClick}
-          className="flex items-center text-sm font-medium p-2.5 px-12 border border-gray-200 text-gray-500 rounded-full"
+          className="group flex items-center text-sm font-medium p-2.5 border-gray-200 text-gray-500 rounded-full hover:border-2 hover:px-12 border transition-all duration-300 ease-in-out"
         >
           <FaPlus className="text-lg text-black font-black" />
-          <span className="mx-2 font-normal">Insert Block</span>
+          <span className="hidden group-hover:block group-hover:mx-2 font-normal">
+            Insert Block
+          </span>
         </button>
       </TooltipButton>
       <span className="h-[2px] flex-1 bg-gray-200"></span>

diff --git a/components/Profile/BlockUploader.tsx b/components/Profile/BlockUploader.tsx
@@ -22,7 +22,7 @@ export default function BlockUploader({ blockType }: UploaderProps) {
     <div className="relative w-full h-full mx-auto rounded-lg">
       <label
         htmlFor={`${blockType}-file`}
-        className="relative p-3 bg-gray-200 flex flex-col justify-center w-full max-w-5xl mx-auto h-full rounded-lg border-gray-300 cursor-pointer"
+        className="relative p-3 bg-gray-200 flex flex-col justify-center w-full max-w-5xl mx-auto h-full rounded-lg border-dashed border-gray-300 cursor-pointer"
       >
         <div className="z-30 flex flex-col items-center justify-center pt-5 pb-6 space-y-8">
           <div className="flex flex-col text-base items-center justify-center space-y-3">

diff --git a/components/Profile/Blocks/GalleryBlock.tsx b/components/Profile/Blocks/GalleryBlock.tsx
@@ -1,35 +1,11 @@
-import { useBlock } from "@/hooks/toggle";
-import React, { ChangeEvent, Dispatch, SetStateAction, useState } from "react";
+"use client";
+import { FaPlus } from "react-icons/fa6";
 import { MdOutlineKeyboardArrowRight } from "react-icons/md";
+import React, { ChangeEvent, Dispatch, SetStateAction, useState } from "react";
 
-interface GalleryBlockProps {
-  toggleGalleryBlock: boolean;
-  setToggleGalleryBlock: Dispatch<SetStateAction<boolean>>;
-  onSelect: () => void;
-}
+import { useBlock } from "@/hooks/toggle";
 
 export const GalleryBlock = () => {
-  const { boardData, onOpenBlock, setDrawerOpen, updateFiles } = useBlock();
-  const [file, setFile] = useState<File | null>(null);
-
-  const handleFileChange = (e: ChangeEvent<HTMLInputElement>) => {
-    if (e.target.files) {
-      const selectedFile = e.target.files[0];
-      setFile(selectedFile);
-
-      const fileUrl = URL.createObjectURL(selectedFile);
-      const fileData = { url: fileUrl, type: "mediaType" };
-
-      onOpenBlock("gallery");
-      if (boardData?.gallery) {
-        updateFiles("gallery", [...boardData.gallery.files, fileData]); // append new file to the existing ones
-      }
-    }
-
-    console.log(boardData);
-    setDrawerOpen(true);
-  };
-
   return (
     <div>
       <div className="w-full rounded-lg flex items-center cursor-pointer">
@@ -75,7 +51,7 @@ export const GalleryBlock = () => {
           </p>
           <MdOutlineKeyboardArrowRight className="text-xl" />
         </button>
-        <label htmlFor="slideFile" className="bg-red-500 mt-4">
+        {/* <label htmlFor="slideFile" className="bg-red-500 mt-4">
           <span className="border-b-2 text-sm mt-4 mx-1 border-pink-500">
             Add slides
           </span>
@@ -85,8 +61,51 @@ export const GalleryBlock = () => {
             className="sr-only"
             onChange={handleFileChange}
           />
-        </label>
+        </label> */}
+        <MiniGalleryUploader className="cursor-pointer p-1 flex justify-center items-center relative border-2 border-dashed h-16 w-20 rounded-lg  hover:text-red-400 hover:border-red-400" />
       </div>
     </div>
   );
 };
+
+interface MiniGalleryUploaderProps {
+  className: string;
+}
+
+export const MiniGalleryUploader = ({
+  className,
+}: MiniGalleryUploaderProps) => {
+  const { boardData, onOpenBlock, setDrawerOpen, updateFiles } = useBlock();
+  const [file, setFile] = useState<File | null>(null);
+
+  const handleFileChange = (e: ChangeEvent<HTMLInputElement>) => {
+    if (e.target.files) {
+      const selectedFile = e.target.files[0];
+      setFile(selectedFile);
+
+      const fileUrl = URL.createObjectURL(selectedFile);
+      const fileData = { url: fileUrl, type: "mediaType" };
+
+      onOpenBlock("gallery");
+      if (boardData?.gallery) {
+        updateFiles("gallery", [...boardData.gallery.files, fileData]);
+      } else {
+        updateFiles("gallery", [fileData]);
+      }
+    }
+
+    setDrawerOpen(true);
+  };
+  return (
+    <label htmlFor="slideFile" className={className}>
+      <FaPlus />
+
+      <input
+        type="file"
+        id="slideFile"
+        className="sr-only"
+        onChange={handleFileChange}
+      />
+    </label>
+  );
+};
diff --git a/components/Profile/Blocks/MiniGalleryCard.tsx b/components/Profile/Blocks/MiniGalleryCard.tsx
@@ -0,0 +1,31 @@
+"use client";
+import React from "react";
+import { FileData } from "@/hooks/toggle";
+import { BsFillTrash3Fill } from "react-icons/bs";
+import Image from "next/image";
+
+interface MiniGalleryCardProps {
+  file: FileData;
+  setSelectedFile: (file: FileData) => void;
+}
+
+const MiniGalleryCard = ({ file, setSelectedFile }: MiniGalleryCardProps) => {
+  return (
+    <div
+      className="group cursor-pointer p-1 relative border-2 border-pink-300 h-16 w-20 rounded-lg"
+      onClick={() => setSelectedFile(file)}
+    >
+      <Image
+        src={file.url}
+        alt={file.type}
+        layout="fill"
+        className="w-full h-full object-cover rounded-lg"
+      />
+      <button className="hidden group-hover:block absolute z-40 top-1 right-1 transform translate-x-1/2 -translate-y-1/2 text-white transition-all duration-500 hover:text-white p-2.5 hover:bg-pink-300 rounded-full shadow-2xl bg-black">
+        <BsFillTrash3Fill className="text-sm" />
+      </button>
+    </div>
+  );
+};
+
+export default MiniGalleryCard;
diff --git a/components/Profile/FileUploader.tsx b/components/Profile/FileUploader.tsx
@@ -44,7 +44,7 @@ const FileUploader = ({ onFilesChange }: FileUploaderProps) => {
     <div className="relative w-full h-full">
       <label
         htmlFor="dropzone-file"
-        className="relative p-3 flex flex-col justify-center w-full h-screen max-w-5xl mx-auto border-2 rounded-lg border-gray-300 cursor-pointer"
+        className="relative p-3 flex flex-col justify-center w-full h-screen max-w-5xl mx-auto border-2 border-dashed rounded-lg border-gray-300 cursor-pointer"
       >
         <div className="z-30 flex flex-col items-center justify-center pt-5 pb-6 space-y-8">
           <div className="flex flex-col items-center justify-center space-y-3">

diff --git a/components/Profile/GalleryUploader.tsx b/components/Profile/GalleryUploader.tsx
@@ -1,9 +1,11 @@
 "use client";
-import React, { useState } from "react";
+
 import Image from "next/image";
+import React, { useState, useEffect } from "react";
+import MiniGalleryCard from "./Blocks/MiniGalleryCard";
+import { MiniGalleryUploader } from "./Blocks/GalleryBlock";
+
 import { useLayoutStore } from "@/hooks/layout";
-import { FaPlus } from "react-icons/fa";
-import { BsFillTrash3Fill } from "react-icons/bs";
 
 interface File {
   type: string;
@@ -17,7 +19,11 @@ interface GalleryBlockProps {
 
 const GalleryUploader = ({ files, blockType }: GalleryBlockProps) => {
   const { layout } = useLayoutStore();
-  const [selectedFile, setSelectedFile] = useState<File>(files[0]); // initially set to the first file
+  const [selectedFile, setSelectedFile] = useState<File>(files[0]);
+
+  useEffect(() => {
+    setSelectedFile(files[0]);
+  }, [files]);
 
   return (
     <div className="">
@@ -42,25 +48,13 @@ const GalleryUploader = ({ files, blockType }: GalleryBlockProps) => {
         </div>
         <div className="flex items-center justify-center space-x-6 py-4">
           {files.map((file, index) => (
-            <div
+            <MiniGalleryCard
               key={index}
-              className="group cursor-pointer p-1 relative border-2 border-pink-300 h-16 w-20 rounded-lg"
-              onClick={() => setSelectedFile(file)} // update selected file when a box is clicked
-            >
-              <Image
-                src={file.url}
-                alt={file.type}
-                fill
-                className="w-full h-full object-cover rounded-lg"
-              />
-              <button className="hidden group-hover:block absolute z-40 top-1 right-1 transform translate-x-1/2 -translate-y-1/2 text-white transition-all duration-500 hover:text-white p-2.5 hover:bg-pink-300 rounded-full shadow-2xl bg-black">
-                <BsFillTrash3Fill className="text-sm" />
-              </button>
-            </div>
+              file={file}
+              setSelectedFile={setSelectedFile}
+            />
           ))}
-          <div className="cursor-pointer p-1 flex justify-center items-center relative border-2 border-dashed h-16 w-20 rounded-lg  hover:text-red-400 hover:border-red-400">
-            <FaPlus />
-          </div>
+          <MiniGalleryUploader className="cursor-pointer p-1 flex justify-center items-center relative border-2 border-dashed h-16 w-20 rounded-lg  hover:text-red-400 hover:border-red-400" />
         </div>
       </div>
     </div>

diff --git a/components/Profile/SideDrawer.tsx b/components/Profile/SideDrawer.tsx
@@ -104,7 +104,11 @@ export default function SideDrawer() {
     }
   }, [blockType]);
   return (
-    <div className={`w-full h-screen ${isDrawerOpen ? "block" : "hidden"}`}>
+    <div
+      className={`w-full h-screen transition-all duration-300 ease-in-out transform ${
+        isDrawerOpen ? "block" : "hidden"
+      }`}
+    >
       <div className="flex w-full h-screen shadow-2xl">
         <div className="w-80 p-8 overflow-y-auto h-full">
           <button onClick={toggleDrawer} className="text-sm">