Block drawer implementations ...

JeremyG11 · Jan 14, 2024 · 79783f8 · 79783f8
1 parent 2c45f96
commit 79783f8
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 30 deletions.
diff --git a/components/Profile/BlockDisplayCard.tsx b/components/Profile/BlockDisplayCard.tsx
@@ -20,26 +20,24 @@ export default function BlockDisplayCard() {
     removeFile(blockKey, index);
   };
 
-  useEffect(() => {
-    console.log("Current layout:", layout);
-  }, [layout]);
+  useEffect(() => {}, [layout]);
 
   return (
-    <div className="w-full h-auto space-y-6">
+    <div className="w-full h-auto space-y-24">
       {Object.keys(boardData).map((blockKey) => {
         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) => (
               <div
                 onClick={() => handleFileClick(blockKey as BlockType)}
-                className={`relative w-full h-screen mx-auto border-2 rounded-lg p-4 border-pink-500 transition-all duration-200 ease-in-out ${
+                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"
                 }`}
               >
                 {file.type === "video" ? (
                   <video
-                    className="object-cover w-full h-full"
+                    className="object-cover w-full h-full rounded-xl"
                     autoPlay
                     loop
                     muted
@@ -53,12 +51,12 @@ export default function BlockDisplayCard() {
                     src={file.url}
                     alt={blockKey}
                     fill
-                    className="w-full h-full object-cover rounded-lg"
+                    className="w-full h-full object-cover rounded-xl"
                   />
                 )}
                 <button
                   onClick={() => handleRemoveFile(blockKey as BlockType, index)}
-                  className="absolute z-40 top-0 right-0 transform translate-x-1/2 -translate-y-1/2 text-black transition-all hover:text-red-500 p-3 rounded-lg shadow-2xl bg-gray-50"
+                  className="absolute z-40 top-0 right-0 transform translate-x-1/2 -translate-y-1/2 text-black transition-all hover:text-red-500 p-3 rounded-xl shadow-2xl bg-gray-50"
                 >
                   <BsFillTrash3Fill />
                 </button>
@@ -67,7 +65,7 @@ export default function BlockDisplayCard() {
           ) : (
             <div
               onClick={() => handleFileClick(blockKey as BlockType)}
-              className={`relative w-full h-screen mx-auto overflow-hidden border-2 rounded-lg p-4 border-pink-500 transition-all duration-200 ease-in-out ${
+              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"
               }`}
             >

diff --git a/components/Profile/ShotUploadForm.tsx b/components/Profile/ShotUploadForm.tsx
@@ -1,16 +1,16 @@
 "use client";
-import React, { RefObject, useState } from "react";
+import React from "react";
 
 import { AddBlock } from "./AddBlock";
 import SideDrawer from "./SideDrawer";
 import { Button } from "../Reusable/Button";
-import TooltipButton from "../Reusable/Tooltip";
 import FileUploader from "./FileUploader";
 import { useBlock } from "@/hooks/toggle";
 import BlockDisplayCard from "./BlockDisplayCard";
 
 export default function ShotUploadForm() {
-  const { isDrawerOpen, setDrawerOpen, boardData } = useBlock();
+  const { isDrawerOpen, boardData } = useBlock();
+  const isFileSelected = Object.keys(boardData).length !== 0;
 
   const handleDropZone = (files: File[]) => {
     const selectedFile = files[0];
@@ -28,7 +28,7 @@ export default function ShotUploadForm() {
       <div className="relative flex-grow overflow-y-auto hide-scroll-bar">
         <div
           className={`px-6 w-full z-10 flex justify-between  top-6  ${
-            false ? "absolute" : "sticky"
+            isFileSelected ? "absolute" : "sticky"
           }`}
         >
           <Button className="border py-2 px-5 text-sm font-medium">
@@ -47,19 +47,16 @@ export default function ShotUploadForm() {
         <div
           className={`${
             isDrawerOpen ? "mx-0" : "mx-8 xl:mx-40"
-          } mt-12 xl:h-full `}
+          } pt-14 xl:h-full `}
         >
-          <form onSubmit={() => {}} className="w-full xl:h-auto ">
-            {false ? (
-              <span className="flex items-center justify-center text-gray-400 text-2xl font-semibold sm:text-4xl">
-                <TooltipButton description="Hello bg-gray-800" className="">
-                  <input
-                    type="text"
-                    placeholder=" Give me a name"
-                    value=""
-                    className="outline-none"
-                  />
-                </TooltipButton>
+          <form onSubmit={() => {}} className="mt-14 w-full xl:h-auto ">
+            {isFileSelected ? (
+              <span className="py-5 flex items-center text-gray-400 text-2xl font-semibold sm:text-4xl xl:max-w-3xl">
+                <input
+                  type="text"
+                  placeholder=" Give me a name"
+                  className="mx-auto outline-none"
+                />
               </span>
             ) : (
               <h1 className="text-center text-gray-800 text-2xl font-semibold sm:text-4xl">
@@ -68,10 +65,10 @@ export default function ShotUploadForm() {
             )}
             <div
               className={`flex items-center justify-center w-full xl:h-full ${
-                false ? "mt-3" : "mt-10"
+                isFileSelected ? "mt-3" : "mt-10"
               }`}
             >
-              {Object.keys(boardData).length === 0 ? (
+              {!isFileSelected ? (
                 <FileUploader onFilesChange={handleDropZone} />
               ) : (
                 <BlockDisplayCard />
@@ -80,7 +77,7 @@ export default function ShotUploadForm() {
 
             <>
               <div className="w-8/12 mx-auto mt-8"></div>
-              {Object.keys(boardData).length !== 0 && <AddBlock />}
+              {isFileSelected && <AddBlock />}
             </>
           </form>
         </div>

diff --git a/components/Reusable/MediaUpload.tsx b/components/Reusable/MediaUpload.tsx
@@ -46,10 +46,15 @@ export default function MediaUpload({
               alt=""
               src={mediaSrcUrl}
               fill
-              className="object-cover w-full h-full"
+              className="object-cover w-full h-full rounded-lg"
             />
           ) : (
-            <video className="object-cover w-full h-full" autoPlay loop muted>
+            <video
+              className="object-cover w-full h-full rounded-lg"
+              autoPlay
+              loop
+              muted
+            >
               <source src={mediaSrcUrl} type="video/mp4" />
               Your browser does not support the video tag.
             </video>