Gallery block and display

components/Profile/BlockDisplayCard.tsx

@@ -1,11 +1,11 @@
-"use client";
 import Image from "next/image";
 import { useEffect } from "react";
 import { BsFillTrash3Fill } from "react-icons/bs";
 
 import BlockUploader from "./BlockUploader";
 import { useLayoutStore } from "@/hooks/layout";
 import { BlockType, useBlock } from "@/hooks/toggle";
+import GalleryUploader from "./GalleryUploader";
 
 export default function BlockDisplayCard() {
   const { layout } = useLayoutStore();
@@ -21,19 +21,28 @@ export default function BlockDisplayCard() {
   };
 
   useEffect(() => {}, [layout]);
+  const galleryBlock = boardData["gallery"];
 
   return (
     <div className="w-full h-auto space-y-24">
-      {Object.keys(boardData).map((blockKey) => {
+      {Object.keys(boardData).map((blockKey, index: number) => {
         const block = boardData[blockKey as BlockType];
         if (typeof block === "object" && block !== null && "files" in block) {
-          return block.files.length > 0 ? (
-            block.files.map((file, index) => (
+          if (blockKey === "gallery") {
+            return (
+              <GalleryUploader
+                files={block.files}
+                blockType={blockKey as BlockType}
+              />
+            );
+          } else if (block.files.length > 0) {
+            return block.files.map((file, index) => (
               <div
                 onClick={() => handleFileClick(blockKey as BlockType)}
                 className={`relative w-full h-screen mx-auto border-2 rounded-xl p-4 border-pink-500 transition-all duration-200 ease-in-out ${
                   layout === "layout1" ? "max-w-3xl" : "max-w-7xl"
                 }`}
+                key={`${blockKey}-${index}`}
               >
                 {file.type === "video" ? (
                   <video
@@ -61,17 +70,20 @@ export default function BlockDisplayCard() {
                   <BsFillTrash3Fill />
                 </button>
               </div>
-            ))
-          ) : (
-            <div
-              onClick={() => handleFileClick(blockKey as BlockType)}
-              className={`relative w-full h-screen mx-auto overflow-hidden border-2 rounded-xl p-4 border-pink-500 transition-all duration-200 ease-in-out ${
-                layout === "layout1" ? "max-w-3xl" : "max-w-7xl"
-              }`}
-            >
-              <BlockUploader blockType={blockKey as BlockType} />
-            </div>
-          );
+            ));
+          } else {
+            return (
+              <div
+                onClick={() => handleFileClick(blockKey as BlockType)}
+                className={`relative w-full h-screen mx-auto overflow-hidden border-2 rounded-xl p-4 border-pink-500 transition-all duration-200 ease-in-out ${
+                  layout === "layout1" ? "max-w-3xl" : "max-w-7xl"
+                }`}
+                key={`${blockKey}-${index}`}
+              >
+                <BlockUploader blockType={blockKey as BlockType} />
+              </div>
+            );
+          }
         }
       })}
     </div>

components/Profile/Blocks/GalleryBlock.tsx

@@ -1,9 +1,5 @@
-import React, {
-  Dispatch,
-  ForwardedRef,
-  SetStateAction,
-  forwardRef,
-} from "react";
+import { useBlock } from "@/hooks/toggle";
+import React, { ChangeEvent, Dispatch, SetStateAction, useState } from "react";
 import { MdOutlineKeyboardArrowRight } from "react-icons/md";
 
 interface GalleryBlockProps {
@@ -13,9 +9,27 @@ interface GalleryBlockProps {
 }
 
 export const GalleryBlock = () => {
-  const handleClick = (event: React.MouseEvent<HTMLDivElement>) => {
-    event.preventDefault();
+  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">
@@ -65,7 +79,12 @@ export const GalleryBlock = () => {
           <span className="border-b-2 text-sm mt-4 mx-1 border-pink-500">
             Add slides
           </span>
-          <input type="file" id="slideFile" className="sr-only" />
+          <input
+            type="file"
+            id="slideFile"
+            className="sr-only"
+            onChange={handleFileChange}
+          />
         </label>
       </div>
     </div>

components/Profile/Blocks/ImageBlock.tsx

@@ -1,9 +1,9 @@
 "use client";
+import React from "react";
 import { useBlock } from "@/hooks/toggle";
-import AdjustLayout from "../../Reusable/AdjustLayout";
 import AltText from "../../Reusable/AltText";
 import MediaUpload from "../../Reusable/MediaUpload";
-import React from "react";
+import AdjustLayout from "../../Reusable/AdjustLayout";
 
 export const ImageBlock = () => {
   const { boardData } = useBlock();

components/Profile/GalleryUploader.tsx

@@ -0,0 +1,70 @@
+"use client";
+import React, { useState } from "react";
+import Image from "next/image";
+import { useLayoutStore } from "@/hooks/layout";
+import { FaPlus } from "react-icons/fa";
+import { BsFillTrash3Fill } from "react-icons/bs";
+
+interface File {
+  type: string;
+  url: string;
+}
+
+interface GalleryBlockProps {
+  files: File[];
+  blockType: string;
+}
+
+const GalleryUploader = ({ files, blockType }: GalleryBlockProps) => {
+  const { layout } = useLayoutStore();
+  const [selectedFile, setSelectedFile] = useState<File>(files[0]); // initially set to the first file
+
+  return (
+    <div className="">
+      <div
+        className={`relative w-full h-screen mx-auto border-2 rounded-xl p-4 border-orange-500 transition-all duration-200 ease-in-out ${
+          layout === "layout1" ? "max-w-3xl" : "max-w-7xl"
+        }`}
+      >
+        <div className="relative h-5/6">
+          {selectedFile.type === "video" ? (
+            <video src={selectedFile.url} controls>
+              Your browser does not support the video tag.
+            </video>
+          ) : (
+            <Image
+              src={selectedFile.url}
+              alt={selectedFile.type}
+              fill
+              className="w-full h-full object-cover rounded-xl"
+            />
+          )}
+        </div>
+        <div className="flex items-center justify-center space-x-6 py-4">
+          {files.map((file, index) => (
+            <div
+              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>
+          ))}
+          <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>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default GalleryUploader;

components/Profile/ShotUploadForm.tsx

@@ -43,7 +43,7 @@ export default function ShotUploadForm() {
               Continue
             </Button>
           </div>
-        </div>{" "}
+        </div>
         <div
           className={`${
             isDrawerOpen ? "mx-0" : "mx-8 xl:mx-40"

hooks/layout.ts

@@ -1,4 +1,4 @@
-import create from "zustand";
+import { create } from "zustand";
 
 type Layout = "layout1" | "layout2";