Feat: text_content

PrinceBaghel258025 · Sep 26, 2024 · a9d82c2 · a9d82c2
1 parent 70f6bb3
commit a9d82c2
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 25 deletions.
diff --git a/src/components/top-level/AddContentButton.jsx b/src/components/top-level/AddContentButton.jsx
@@ -1,5 +1,4 @@
-/* eslint-disable react/prop-types */
-import React, { useState } from "react";
+import React from "react";
 import {
   IconButton,
   Menu,
@@ -9,7 +8,11 @@ import {
 } from "@chakra-ui/react";
 import { AddIcon } from "@chakra-ui/icons";
 
-const AddContentButton = ({ onAdd }) => {
+const AddContentButton = ({ onAdd, contents }) => {
+  const includes360 = contents?.some(
+    (con) => con?.type === "360_image" || con?.type === "360_video"
+  );
+
   return (
     <Menu>
       <MenuButton
@@ -21,9 +24,14 @@ const AddContentButton = ({ onAdd }) => {
         isRound
       />
       <MenuList>
-        <MenuItem onClick={() => onAdd("360_image")}>360° Image</MenuItem>
-        <MenuItem onClick={() => onAdd("360_video")}>360° Video</MenuItem>
+        {!includes360 && (
+          <>
+            <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("text_content")}>Text Content</MenuItem>
         <MenuItem onClick={() => onAdd("media_content")}>
           Media Content
         </MenuItem>

diff --git a/src/components/top-level/ContentBuilder.jsx b/src/components/top-level/ContentBuilder.jsx
@@ -224,6 +224,7 @@ const ContentBuilder = () => {
         id: nanoid(),
         type,
         header: "",
+        text_content: "",
         data: [
           {
             id: nanoid(),
@@ -250,16 +251,17 @@ const ContentBuilder = () => {
   };
 
   return (
-    <Box display="flex" h="100%">
+    <Box display="flex" h="100%" bg={"#F5F6FA"}>
       <Box
         width="60%"
         position="relative"
         h="100dvh"
         padding={10}
+        overflowX={"hidden"}
         overflowY={"scroll"}
       >
         <Box position="absolute" top={10} right={4}>
-          <AddContentButton onAdd={addContent} />
+          <AddContentButton onAdd={addContent} contents={contents} />
         </Box>
 
         <VStack mt={24} spacing={4} align="stretch">

diff --git a/src/components/top-level/ContentCard.jsx b/src/components/top-level/ContentCard.jsx
@@ -6,17 +6,31 @@ import {
   Heading,
   Switch,
   Input,
+  Textarea,
 } from "@chakra-ui/react";
 import { DeleteIcon, EditIcon } from "@chakra-ui/icons";
 import MediaPicker from "./MediaPicker";
 
-const ContentCard = ({ id, type, header, data, onUpdate, onDelete }) => {
+const ContentCard = ({
+  id,
+  type,
+  header,
+  data,
+  onUpdate,
+  text_content,
+  onDelete,
+}) => {
   const inputRef = useRef(null);
+  const textContentRef = useRef(null);
 
   const handleHeaderChange = (e) => {
     onUpdate({ header: e.target.value });
   };
 
+  const handleTextContentChange = (e) => {
+    onUpdate({ text_content: e.target.value });
+  };
+
   const handleMediaChange = (newMedia) => {
     onUpdate({
       data: [
@@ -28,8 +42,12 @@ const ContentCard = ({ id, type, header, data, onUpdate, onDelete }) => {
     });
   };
 
+  const mediaTypes = ["360_image", "360_video", "media_content"];
+
+  const contentTypes = ["header", "text_content"];
+
   return (
-    <Box borderWidth={1} borderRadius="lg" p={4}>
+    <Box borderRadius="2xl" boxShadow="lg" p={4} bg={"white"}>
       <HStack justifyContent="space-between" mb={4}>
         <Heading size="md">{type}</Heading>
         <HStack>
@@ -46,7 +64,7 @@ const ContentCard = ({ id, type, header, data, onUpdate, onDelete }) => {
         </HStack>
       </HStack>
 
-      {type === "header" && (
+      {contentTypes.includes(type) && (
         <Box display="flex" alignItems="center" mb={4}>
           <Input
             placeholder="Header"
@@ -65,23 +83,27 @@ const ContentCard = ({ id, type, header, data, onUpdate, onDelete }) => {
         </Box>
       )}
 
-      {type === "360_image" && (
-        <MediaPicker
-          type={type}
-          selectedImages={data[0]?.image_url ? [data[0].image_url] : []}
-          onImagesChange={handleMediaChange}
-        />
-      )}
-
-      {type === "360_video" && (
-        <MediaPicker
-          type={type}
-          selectedImages={data[0]?.image_url ? [data[0].image_url] : []}
-          onImagesChange={handleMediaChange}
-        />
+      {type === "text_content" && (
+        <Box display="flex" alignItems="start" mb={4}>
+          <Textarea
+            placeholder="text content"
+            size="sm"
+            ref={textContentRef}
+            value={text_content}
+            onChange={handleTextContentChange}
+            height="100px"
+          />
+          <IconButton
+            aria-label="Edit"
+            icon={<EditIcon />}
+            size="sm"
+            ml={2}
+            onClick={() => textContentRef.current.focus()}
+          />
+        </Box>
       )}
 
-      {type === "media_content" && (
+      {mediaTypes.includes(type) && (
         <MediaPicker
           type={type}
           selectedImages={data[0]?.image_url ? [data[0].image_url] : []}