banner card update

src/Components/Banner/BannerEdit.jsx

@@ -25,6 +25,7 @@ import {
   useToast,
   Switch,
   Tag,
+  Text,
 } from "@chakra-ui/react";
 import { TiWarning } from "react-icons/ti";
 import { OPACITY_ON_LOAD } from "../../Layout/animations";
@@ -33,6 +34,7 @@ import Loader01 from "../../Components/Loaders/Loader01";
 import FullscreenLoaders from "../../Components/Loaders/FullscreenLoaders";
 import fallbackImage from "../../assets/ultp-fallback-img.webp";
 import Header from "../../Components/Header";
+import CommunityBannerCard from "../../Pages/Community/CommunityBannerCard";
 
 const BannerEdit = ({isLoading, data, updateBanner, navigateTo}) => {
   const { id } = useParams();
@@ -41,6 +43,7 @@ const BannerEdit = ({isLoading, data, updateBanner, navigateTo}) => {
   const [isLoadingEdit, setIsLoadingEdit] = useState(false);
   const [selectedImage, setSelectedImage] = useState();
   const [largeImageData, setLargeImageData] = useState(null);
+  // const [formData, setFormData] = useState()
 
 
   const {
@@ -49,16 +52,23 @@ const BannerEdit = ({isLoading, data, updateBanner, navigateTo}) => {
     reset,
     formState: { errors },
     setValue,
+    watch
   } = useForm({
     resolver: yupResolver(editCommunityBannerSchema),
     defaultValues: {
-      heading: "",
-      sub_heading: "",
-      CTO_button_title: "",
-      CTO_button_link: "",
+      heading: data?.data?.Heading,
+      sub_heading: data?.data?.sub_heading,
+      CTO_button_title: data?.data?.CTO_button_title,
+      CTO_button_link: data?.data?.CTO_button_link,
     },
   });
 
+  
+  // Watch form values to update preview
+  const formData = watch();
+  
+  
+
   useEffect(() => {
     if (data?.data) {
       setSelectedImage(
@@ -69,10 +79,15 @@ const BannerEdit = ({isLoading, data, updateBanner, navigateTo}) => {
       setValue("CTO_button_title", data?.data?.CTO_button_title);
       setValue("CTO_button_link", data?.data?.CTO_button_link);
       setValue("banner_image", data?.data?.banner_image);
+      watch()
     }
   }, [data, setValue]);
 
-  console.log(errors);
+
+  // useEffect(() => {
+  //   const subscription = watch((value) => {setFormData(value)});
+  //   return () => subscription.unsubscribe();
+  // }, [watch]);
 
   const onSubmit = async (formData) => {
     setIsLoadingEdit(true);
@@ -171,14 +186,64 @@ const BannerEdit = ({isLoading, data, updateBanner, navigateTo}) => {
   
         <Box boxSize="sm" 
           className="d-flex w-100 justify-content-center flex-column align-items-center gap-3">
-            <Image
+            {/* <Image
               shadow={"md"}
               rounded={8}
               w={500}
               h={240}
               src={selectedImage}
               alt="Selected Image"
-            />
+            /> */}
+
+
+
+
+            <Box
+              shadow={"md"}
+              rounded={8}
+              w={469}
+              h={250}
+              borderRadius={'sm'}
+              bgImage={selectedImage}
+              bgSize="cover"
+              bgPosition="center"
+              ps={8}
+              pt={14}
+              >
+                <Text w={"70%"}fontSize={"19px"} className="fw-bolder" color={"#DE858E"} display={'block'} as={"span"}>
+                  {formData?.heading}
+                </Text>
+                <Text w={"70%"} fontSize={"10px"} mt={1} className=" fw-normal" color={"#ffffff"} display={'block'} as={"span"}>
+                  {formData?.sub_heading}
+                </Text>
+                <Button
+              fontWeight={"normal"}
+              fontSize={"9px"}
+              ps={4}
+              pe={4}
+              pt={1}
+              pb={1}
+              mt={2}
+              color={"#ffffff"}
+              _hover={{
+                bgGradient:"linear(to-r, #1E114B, purple)"
+              }}
+              // bg={'#1E114B'}
+              // bgGradient="linear(to-r, #1E114B, purple)"
+              variant={"outline"}
+              // colorScheme="purple"
+              rounded={4}
+              size={"xs"}
+              // border={'1px soild #fff'}
+              
+            >
+              {formData?.CTO_button_title}
+            </Button>
+
+            </Box>
+
+
+
             {selectedImage === fallbackImage || largeImageData === null ? (
               ""
             ) : (
@@ -248,7 +313,7 @@ const BannerEdit = ({isLoading, data, updateBanner, navigateTo}) => {
           <FormLabel className="web-text-large fw-bold rubix-text-dark">
             Sub heading
           </FormLabel>
-          <Input
+          <Textarea
             {...register("sub_heading")}
             placeholder="Sub heading"
             className="web-text-medium"

src/Components/Banner/BannerView.jsx

@@ -12,6 +12,7 @@ import {
   Image,
   StackDivider,
   Tag,
+  Text,
   VStack,
 } from "@chakra-ui/react";
 
@@ -57,26 +58,57 @@ const BannerView = ({data, isLoading, editLink}) => {
             boxSize="sm"
             className="d-flex w-100 justify-content-center flex-column align-items-center gap-3"
           >
-            <Image
+            {/* <Image
               shadow={"md"}
               rounded={8}
               w={500}
               h={240}
               src={`https://rubix.betadelivery.com/${banner?.banner_image}`}
               alt="Selected Image"
-            />
-            {/* <Button
-                  onClick={() => setSelectedImage(fallbackImage)}
-                  backgroundColor="red.400"
-                  color={"whitesmoke"}
-                  transition={"0.5s"}
-                  _hover={{
-                    backgroundColor: "red.500",
-                  }}
-                  size="xs"
-                >
-                  Remove
-                </Button> */}
+            /> */}
+            <Box
+              shadow={"md"}
+              rounded={8}
+              w={469}
+              h={250}
+              borderRadius={'sm'}
+              bgImage={`https://rubix.betadelivery.com/${banner?.banner_image}`}
+              bgSize="cover"
+              bgPosition="center"
+              ps={8}
+              pt={14}
+              >
+                <Text w={"70%"}fontSize={"19px"} className="fw-bolder" color={"#DE858E"} display={'block'} as={"span"}>
+                  {banner?.Heading}
+                </Text>
+                <Text w={"70%"} fontSize={"9px"} mt={1} className=" fw-normal" color={"#ffffff"} display={'block'} as={"span"}>
+                  {banner?.sub_heading}
+                </Text>
+                <Button
+              fontWeight={"normal"}
+              fontSize={"9px"}
+              ps={4}
+              pe={4}
+              pt={1}
+              pb={1}
+              mt={2}
+              color={"#ffffff"}
+              _hover={{
+                bgGradient:"linear(to-r, #1E114B, purple)"
+              }}
+              // bg={'#1E114B'}
+              // bgGradient="linear(to-r, #1E114B, purple)"
+              variant={"outline"}
+              // colorScheme="purple"
+              rounded={4}
+              size={"xs"}
+              // border={'1px soild #fff'}
+              
+            >
+              {banner?.CTO_button_title}
+            </Button>
+
+            </Box>
           </Box>
         </Box>