From 70f6bb3d609bd974cf7d18148975c88cb48e56a7 Mon Sep 17 00:00:00 2001
From: pratikAgspert <pratik@agspert.com>
Date: Thu, 26 Sep 2024 16:31:16 +0530
Subject: [PATCH] update: ui

---
 src/components/CarouselComponent.jsx          |  4 +-
 src/components/generic/DraggableDrawer.jsx    |  2 +-
 src/components/top-level/AddContentButton.jsx | 22 ++---
 src/components/top-level/ContentBuilder.jsx   | 17 +++-
 src/components/top-level/ContentCard.jsx      | 93 +++++++++++++------
 src/components/top-level/content-builder.jsx  |  2 +-
 6 files changed, 93 insertions(+), 47 deletions(-)

diff --git a/src/components/CarouselComponent.jsx b/src/components/CarouselComponent.jsx
index 9c79dda..1c41b94 100644
--- a/src/components/CarouselComponent.jsx
+++ b/src/components/CarouselComponent.jsx
@@ -51,10 +51,10 @@ const CarouselComponent = ({ productData, defaultSheetData }) => {
       sliderRef.current.slickPrev();
     }
   };
-  console.log("state carousel", productData)
+  console.log("state carousel", productData);
 
   return (
-    <Stack position={"relative"} overflow={"hidden"} maxH={"80dvh"}>
+    <Stack position={"relative"} overflow={"hidden"}>
       <Slider ref={sliderRef} {...settings}>
         {productData?.map((dataset) => {
           return (
diff --git a/src/components/generic/DraggableDrawer.jsx b/src/components/generic/DraggableDrawer.jsx
index 1355e86..89f806f 100644
--- a/src/components/generic/DraggableDrawer.jsx
+++ b/src/components/generic/DraggableDrawer.jsx
@@ -28,7 +28,7 @@ export default function DraggableDrawer({
 }) {
   const { height } = useWindowSize();
   const level = React.useMemo(
-    () => [0, -(height - 80), -(height - 80)],
+    () => [0, -(height - 160), -(height - 160)],
     [height]
   );
 
diff --git a/src/components/top-level/AddContentButton.jsx b/src/components/top-level/AddContentButton.jsx
index 5c975ec..30c6413 100644
--- a/src/components/top-level/AddContentButton.jsx
+++ b/src/components/top-level/AddContentButton.jsx
@@ -1,17 +1,15 @@
 /* eslint-disable react/prop-types */
-import React, { useState } from 'react';
+import React, { useState } from "react";
 import {
   IconButton,
   Menu,
   MenuButton,
   MenuList,
   MenuItem,
-} from '@chakra-ui/react';
-import { AddIcon } from '@chakra-ui/icons';
+} from "@chakra-ui/react";
+import { AddIcon } from "@chakra-ui/icons";
 
-
-
-const AddContentButton= ({ onAdd }) => {
+const AddContentButton = ({ onAdd }) => {
   return (
     <Menu>
       <MenuButton
@@ -23,13 +21,15 @@ const AddContentButton= ({ onAdd }) => {
         isRound
       />
       <MenuList>
-        <MenuItem onClick={() => onAdd('360_image')}>360° Image</MenuItem>
-        <MenuItem onClick={() => onAdd('360_video')}>360° Video</MenuItem>
-        <MenuItem onClick={() => onAdd('Header')}>Header</MenuItem>
-        <MenuItem onClick={() => onAdd('Media Content')}>Media Content</MenuItem>
+        <MenuItem onClick={() => onAdd("360_image")}>360° Image</MenuItem>
+        <MenuItem onClick={() => onAdd("360_video")}>360° Video</MenuItem>
+        <MenuItem onClick={() => onAdd("header")}>Header</MenuItem>
+        <MenuItem onClick={() => onAdd("media_content")}>
+          Media Content
+        </MenuItem>
       </MenuList>
     </Menu>
   );
 };
 
-export default AddContentButton;
\ No newline at end of file
+export default AddContentButton;
diff --git a/src/components/top-level/ContentBuilder.jsx b/src/components/top-level/ContentBuilder.jsx
index 5b0dfb3..ffcec7a 100644
--- a/src/components/top-level/ContentBuilder.jsx
+++ b/src/components/top-level/ContentBuilder.jsx
@@ -251,10 +251,17 @@ const ContentBuilder = () => {
 
   return (
     <Box display="flex" h="100%">
-      <Box width="50%" position="relative" borderWidth={2} h="100%">
-        <Box position="absolute" top={0} right={4}>
+      <Box
+        width="60%"
+        position="relative"
+        h="100dvh"
+        padding={10}
+        overflowY={"scroll"}
+      >
+        <Box position="absolute" top={10} right={4}>
           <AddContentButton onAdd={addContent} />
         </Box>
+
         <VStack mt={24} spacing={4} align="stretch">
           {contents.map((content) => (
             <ContentCard
@@ -267,14 +274,14 @@ const ContentBuilder = () => {
         </VStack>
       </Box>
 
-      <Stack width="50%" borderWidth={2} h="100%" alignItems={"center"}>
+      <Stack width="40%" h="100%" alignItems={"center"}>
         <Stack
           w={"292px"}
           h={"603px"}
-          my={5}
+          mt={50}
           borderWidth={5}
           borderColor={"black"}
-          borderRadius={30}
+          borderRadius={50}
           overflow={"hidden"}
         >
           <CarouselComponent
diff --git a/src/components/top-level/ContentCard.jsx b/src/components/top-level/ContentCard.jsx
index 4c63e49..61770dd 100644
--- a/src/components/top-level/ContentCard.jsx
+++ b/src/components/top-level/ContentCard.jsx
@@ -1,5 +1,12 @@
 import React, { useRef } from "react";
-import { Box, IconButton, HStack, Heading, Switch, Input } from "@chakra-ui/react";
+import {
+  Box,
+  IconButton,
+  HStack,
+  Heading,
+  Switch,
+  Input,
+} from "@chakra-ui/react";
 import { DeleteIcon, EditIcon } from "@chakra-ui/icons";
 import MediaPicker from "./MediaPicker";
 
@@ -12,10 +19,12 @@ const ContentCard = ({ id, type, header, data, onUpdate, onDelete }) => {
 
   const handleMediaChange = (newMedia) => {
     onUpdate({
-      data: [{
-        ...data[0],
-        image_url: newMedia[0]
-      }]
+      data: [
+        {
+          ...data[0],
+          image_url: newMedia[0],
+        },
+      ],
     });
   };
 
@@ -24,33 +33,63 @@ const ContentCard = ({ id, type, header, data, onUpdate, onDelete }) => {
       <HStack justifyContent="space-between" mb={4}>
         <Heading size="md">{type}</Heading>
         <HStack>
-          <IconButton onClick={onDelete} aria-label="Delete" icon={<DeleteIcon />} size="sm" />
-          <Switch size="sm" onChange={() => onUpdate({ isActive: !data[0]?.isActive })} />
+          <IconButton
+            onClick={onDelete}
+            aria-label="Delete"
+            icon={<DeleteIcon />}
+            size="sm"
+          />
+          <Switch
+            size="sm"
+            onChange={() => onUpdate({ isActive: !data[0]?.isActive })}
+          />
         </HStack>
       </HStack>
-      <Box display="flex" alignItems="center" mb={4}>
-        <Input 
-          placeholder="Header" 
-          size="sm" 
-          ref={inputRef} 
-          value={header} 
-          onChange={handleHeaderChange}
+
+      {type === "header" && (
+        <Box display="flex" alignItems="center" mb={4}>
+          <Input
+            placeholder="Header"
+            size="sm"
+            ref={inputRef}
+            value={header}
+            onChange={handleHeaderChange}
+          />
+          <IconButton
+            aria-label="Edit"
+            icon={<EditIcon />}
+            size="sm"
+            ml={2}
+            onClick={() => inputRef.current.focus()}
+          />
+        </Box>
+      )}
+
+      {type === "360_image" && (
+        <MediaPicker
+          type={type}
+          selectedImages={data[0]?.image_url ? [data[0].image_url] : []}
+          onImagesChange={handleMediaChange}
         />
-        <IconButton
-          aria-label="Edit"
-          icon={<EditIcon />}
-          size="sm"
-          ml={2}
-          onClick={() => inputRef.current.focus()}
+      )}
+
+      {type === "360_video" && (
+        <MediaPicker
+          type={type}
+          selectedImages={data[0]?.image_url ? [data[0].image_url] : []}
+          onImagesChange={handleMediaChange}
+        />
+      )}
+
+      {type === "media_content" && (
+        <MediaPicker
+          type={type}
+          selectedImages={data[0]?.image_url ? [data[0].image_url] : []}
+          onImagesChange={handleMediaChange}
         />
-      </Box>
-      <MediaPicker
-        type={type}
-        selectedImages={data[0]?.image_url ? [data[0].image_url] : []}
-        onImagesChange={handleMediaChange}
-      />
+      )}
     </Box>
   );
 };
 
-export default ContentCard;
\ No newline at end of file
+export default ContentCard;
diff --git a/src/components/top-level/content-builder.jsx b/src/components/top-level/content-builder.jsx
index 64e1273..5a5e54d 100644
--- a/src/components/top-level/content-builder.jsx
+++ b/src/components/top-level/content-builder.jsx
@@ -4,7 +4,7 @@ import ContentBuilder from "./ContentBuilder";
 
 const ContentBuilderPage = () => {
   return (
-    <Box w="100dvw" minH="100dvh" borderWidth={2}>
+    <Box w="100dvw" minH="100dvh">
       <ContentBuilder />
     </Box>
   );