Cards Improvement (#2)

* shuffable-cards * update: having 2 sortable contexts * fix: Section splitting through ui * refactor: rename & sheet data feeding * fix: text_content * Feat: sheet changes * feat: social links ui * update: separating states * update: picking multiple images/videos * update: delete image/video * patch: sheet card dragging * update: sortable images/videos * fix: Add Button Stick to top * Feat: Social Links ui * Feat: Functionality of social links * Fix: empty social object * fix: ui changes * fix: Image & Video Screen * small ui change * Feat: check if url is correct through regex --------- Co-authored-by: pratikAgspert <[email protected]>
PrinceBaghel258025 · Sep 28, 2024 · 3399c28 · 3399c28
1 parent 3c0822d
commit 3399c28
Show file tree

Hide file tree

Showing 19 changed files with 1,033 additions and 386 deletions.
diff --git a/package.json b/package.json
@@ -13,6 +13,9 @@
     "@chakra-ui/icons": "^2.1.1",
     "@chakra-ui/next-js": "^2.2.0",
     "@chakra-ui/react": "^2.8.2",
+    "@dnd-kit/core": "^6.1.0",
+    "@dnd-kit/sortable": "^8.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.0",
     "@fontsource/poppins": "^5.0.12",

diff --git a/src/components/BrandBanner.jsx b/src/components/BrandBanner.jsx
@@ -6,9 +6,9 @@ export const BrandBanner = ({ data }) => {
 
   return (
     <>
-      {brandBanner ? (
+      {brandBanner?.data[0]?.image_url ? (
         <Image
-          src={brandBanner?.brand_banner}
+          src={brandBanner?.data[0]?.image_url}
           alt="banner"
           position={"absolute"}
           top={0}

diff --git a/src/components/CarouselComponent.jsx b/src/components/CarouselComponent.jsx
@@ -51,15 +51,17 @@ const CarouselComponent = ({ productData, defaultSheetData }) => {
       sliderRef.current.slickPrev();
     }
   };
-  console.log("state carousel", productData);
+  console.log("state carousel", productData, defaultSheetData);
 
   return (
     <Stack position={"relative"} overflow={"hidden"}>
       <Slider ref={sliderRef} {...settings}>
+        {productData?.length === 0 && <Stack h={"80dvh"} />}
+
         {productData?.map((dataset) => {
           return (
             <Stack key={dataset.id}>
-              {dataset?.type === "360_image" && (
+              {dataset?.type === "carousel_360_image" && (
                 <Scene
                   zoom={dataset?.zoom || 1}
                   targetRotation={dataset?.targetRotation}
@@ -72,7 +74,7 @@ const CarouselComponent = ({ productData, defaultSheetData }) => {
                 />
               )}
 
-              {dataset?.type === "360_video" && (
+              {dataset?.type === "carousel_360_video" && (
                 <Scene
                   zoom={dataset?.zoom || 1}
                   targetRotation={dataset?.targetRotation}
@@ -84,15 +86,15 @@ const CarouselComponent = ({ productData, defaultSheetData }) => {
                 />
               )}
 
-              {dataset?.type === "2d_image" && (
+              {dataset?.type === "carousel_2d_image" && (
                 <ImageScreen
                   header={dataset?.header}
                   setIsInteracting={setIsInteracting}
                   data={dataset?.data}
                 />
               )}
 
-              {dataset?.type === "2d_video" && (
+              {dataset?.type === "carousel_2d_video" && (
                 <VideoScreen
                   header={dataset?.header}
                   setIsInteracting={setIsInteracting}

diff --git a/src/components/DrawerInfo.jsx b/src/components/DrawerInfo.jsx
@@ -22,33 +22,38 @@ export const DrawerInfo = ({ data }) => {
         },
       }}
       justifyContent={"space-between"}
-      mt={"6.5rem"}
-      spacing={5}
+      mt={"4.5rem"}
+      spacing={1}
     >
       {data?.length > 0
         ? data?.map((info) => {
             switch (info?.type) {
               case "header":
-                return (
-                  <Header key={info?.id} headerTitle={info?.header_text} />
-                );
+                return <Header key={info?.id} headerTitle={info?.header} />;
               case "text_content":
                 return (
                   <TextContent
                     key={info?.id}
-                    textContent={info?.text_content}
+                    header={info?.header}
+                    content={info?.content}
                   />
                 );
               case "image_content":
-                return <ImageContent key={info?.id} media={info?.image_urls} />;
+                return (
+                  <ImageContent
+                    key={info?.id}
+                    //  media={info?.image_urls}
+                    media={info?.data}
+                  />
+                );
               case "partners":
                 return (
                   <BusinessPartner key={info?.id} partner={info?.partners} />
                 );
               case "video_content":
-                return <VideoContent key={info?.id} media={info?.video_urls} />;
+                return <VideoContent key={info?.id} media={info?.data} />;
               case "redirect_url":
-                return <RedirectButton key={info?.id} link={info?.link} />;
+                return <RedirectButton key={info?.id} link={info} />;
               case "social_links":
                 return (
                   <SocialLinks

diff --git a/src/components/ImageContent.jsx b/src/components/ImageContent.jsx
@@ -11,8 +11,10 @@ export const ImageContent = ({ media }) => {
     const images = media?.filter((item) => !item.endsWith(".mp4"));
     return { images };
   };
+  // const { images } = splitMedia(media);
+  const images = media;
 
-  const { images } = splitMedia(media);
+  console.log("images: ", media);
 
   const settings = {
     dots: true,
@@ -29,22 +31,27 @@ export const ImageContent = ({ media }) => {
 
   return (
     <>
-      {images?.length === 1 ? (
-        <Image w={"100%"} borderRadius={8} src={images[0]} alt="image" />
-      ) : (
+      {images?.length === 1 && images?.[0]?.image_url ? (
+        <Image
+          w={"100%"}
+          borderRadius={8}
+          src={images[0]?.image_url}
+          alt="image"
+        />
+      ) : images?.[0]?.image_url ? (
         <Stack as={Slider} {...settings} my={3}>
           {images?.map((img) => (
             <Image
-              key={img}
-              src={img}
+              key={img?.id}
+              src={img?.image_url}
               alt="image"
               w={"100%"}
               h={"100%"}
               borderRadius={8}
             />
           ))}
         </Stack>
-      )}
+      ) : null}
     </>
   );
 };
diff --git a/src/components/ImageScreen.jsx b/src/components/ImageScreen.jsx
@@ -2,19 +2,27 @@ import { Box, Image, Stack, Text } from "@chakra-ui/react";
 import React, { useState } from "react";
 import { HeroSection } from "./HeroSection";
 
-const ImageScreen = ({header, data, setIsInteracting }) => {
-  const imageUrl = data?.find((info) => info?.type === "2d_image");
+const ImageScreen = ({ header, data, setIsInteracting }) => {
+  const imageUrl = data?.find((info) => info?.type === "carousel_2d_image");
 
   return (
-    <Box position={"relative"} w={"100dvw"} h={"100dvh"} >
-      <Box
-        backgroundImage={imageUrl?.image_url}
-        backgroundSize={"cover"}
-        backgroundColor={"pink"}
-        height={"100%"}
-        width={"100%"}
-      ></Box>
-      <HeroSection header={header} setIsBottomSheetOpen={(val) => setIsInteracting(!val)} data={data} isImage />
+    <Box position={"relative"} h={"80dvh"} overflow={"hidden"}>
+      <Stack overflow={"hidden"}>
+        {imageUrl?.image_url && (
+          <Image
+            src={imageUrl?.image_url}
+            height={"35.5rem"}
+            objectFit={"fill"}
+            alt="img"
+          />
+        )}
+      </Stack>
+      <HeroSection
+        header={header}
+        setIsBottomSheetOpen={(val) => setIsInteracting(!val)}
+        data={data}
+        isImage
+      />
     </Box>
   );
 };

diff --git a/src/components/Scene.jsx b/src/components/Scene.jsx
@@ -193,8 +193,8 @@ const Sphere = ({
   isBottomSheetOpen,
   targetRotation,
 }) => {
-  const image_360 = data?.find((info) => info?.type === "360_image");
-  const video_360 = data?.find((info) => info?.type === "360_video");
+  const image_360 = data?.find((info) => info?.type === "carousel_360_image");
+  const video_360 = data?.find((info) => info?.type === "carousel_360_video");
   if (image_360) {
     return (
       image_360?.image_url && (

diff --git a/src/components/SocialLinks.jsx b/src/components/SocialLinks.jsx
@@ -1,26 +1,67 @@
-import { Flex, Image, Link } from "@chakra-ui/react";
 import React from "react";
+import { Flex, Link, Icon } from "@chakra-ui/react";
+import {
+  FaYoutube,
+  FaAmazon,
+  FaFacebookSquare,
+  FaPinterest,
+  FaShopify,
+} from "react-icons/fa";
+import { IoLogoInstagram } from "react-icons/io";
+
+const initialSocialIcons = [
+  { icon: FaYoutube, color: "#ce1312", name: "Youtube" },
+  { icon: FaAmazon, color: "black", name: "Amazon" },
+  { icon: FaFacebookSquare, color: "#4460A0", name: "Facebook" },
+  { icon: FaPinterest, color: "#cc2127", name: "Pinterest" },
+  { icon: FaShopify, color: "#81bf37", name: "Shopify" },
+  { icon: IoLogoInstagram, color: "#d62da6", name: "Instagram" },
+];
 
 export const SocialLinks = ({ socialLinks }) => {
+  console.log("socialLinks:", socialLinks);
+
+  const getIconComponent = (label) => {
+    const iconInfo = initialSocialIcons.find(
+      (icon) => icon.name.toLowerCase() === label.toLowerCase()
+    );
+    return iconInfo ? iconInfo.icon : null;
+  };
+
   return (
-    <Flex justifyContent={"center"} gap={3}>
-      {socialLinks?.map((link) => (
-        <Link
-          href={link?.url}
-          isExternal
-          key={link?.url}
-          w={"1.5rem"}
-          h={"1.5rem"}
-        >
-          <Image
-            borderRadius={100}
-            w={"100%"}
-            h={"100%"}
-            src={link?.thumbnail}
-            alt="thumbnail"
-          />
-        </Link>
-      ))}
+    <Flex justifyContent={"center"} gap={1}>
+      {socialLinks?.map((link) => {
+        const IconComponent = getIconComponent(link.label);
+        return (
+          <Link
+            href={link?.url}
+            isExternal
+            key={link?.id}
+            display="flex"
+            alignItems="center"
+            justifyContent="center"
+            border={"0.5px solid lightgray"}
+            borderRadius={"100%"}
+            p={1}
+          >
+            {IconComponent && (
+              <Icon
+                as={IconComponent}
+                w="100%"
+                h="100%"
+                color={
+                  initialSocialIcons.find(
+                    (icon) =>
+                      icon.name.toLowerCase() === link.label.toLowerCase()
+                  )?.color
+                }
+              />
+            )}
+          </Link>
+        );
+      })}
     </Flex>
   );
 };
+
+export default SocialLinks;
diff --git a/src/components/TextContent.jsx b/src/components/TextContent.jsx
@@ -1,16 +1,16 @@
 import { Stack, Text } from "@chakra-ui/react";
 import React from "react";
 
-export const TextContent = ({ textContent }) => {
+export const TextContent = ({ header, content }) => {
   return (
     <>
-      <Stack spacing={2}>
+      <Stack spacing={0}>
         <Text fontSize={"medium"} fontWeight={600}>
-          {textContent?.name}
+          {header}
         </Text>
 
         <Text fontSize={"small"} align={"justify"}>
-          {textContent?.content}
+          {content}
         </Text>
       </Stack>
     </>

diff --git a/src/components/VideoContent.jsx b/src/components/VideoContent.jsx
@@ -12,7 +12,9 @@ const VideoContent = ({ media }) => {
     return { videos };
   };
 
-  const { videos } = splitMedia(media);
+  // const { videos } = splitMedia(media);
+
+  const videos = media;
 
   const settings = {
     dots: true,
@@ -24,13 +26,13 @@ const VideoContent = ({ media }) => {
   };
   return (
     <>
-      {videos?.length === 1 ? (
+      {videos?.length === 1 && videos?.[0]?.image_url ? (
         <Flex borderRadius={"1rem"}>
           <video
             style={{
               borderRadius: "0.5rem",
             }}
-            src={videos[0]}
+            src={videos[0]?.image_url}
             controls
             autoPlay
             loop
@@ -39,15 +41,15 @@ const VideoContent = ({ media }) => {
           />
           <Text w={"16rem"} h={"9rem"} display={"none"} />
         </Flex>
-      ) : (
+      ) : videos?.[0]?.image_url ? (
         <HStack as={Slider} {...settings} width={"100%"} my={3}>
           {videos?.map((video) => (
             <Flex key={video} borderRadius={"1rem"}>
               <video
                 style={{
                   borderRadius: "0.5rem",
                 }}
-                src={video}
+                src={video?.image_url}
                 controls
                 autoPlay
                 loop
@@ -58,7 +60,7 @@ const VideoContent = ({ media }) => {
             </Flex>
           ))}
         </HStack>
-      )}
+      ) : null}
     </>
   );
 };