From 9579771f98ec3918bc200947b584ba0624eb1ea2 Mon Sep 17 00:00:00 2001
From: "Siddhesh.More" <siddhesh.more@wdimails.com>
Date: Wed, 12 Feb 2025 13:18:18 +0530
Subject: [PATCH] update

---
 .../ManageCMS/PrivacyPolicy/PrivacyPolicy.tsx | 37 ++++++++-----------
 .../PrivacyPolicy/PrivacyPolicyAddModel.tsx   |  2 +-
 .../PrivacyPolicy/PrivacyPolicySkeleton.tsx   | 16 ++++++++
 src/components/MainFrame.tsx                  | 13 ++++---
 4 files changed, 39 insertions(+), 29 deletions(-)
 create mode 100644 src/Pages/ManageCMS/PrivacyPolicy/PrivacyPolicySkeleton.tsx

diff --git a/src/Pages/ManageCMS/PrivacyPolicy/PrivacyPolicy.tsx b/src/Pages/ManageCMS/PrivacyPolicy/PrivacyPolicy.tsx
index 94b6f41..6950f72 100644
--- a/src/Pages/ManageCMS/PrivacyPolicy/PrivacyPolicy.tsx
+++ b/src/Pages/ManageCMS/PrivacyPolicy/PrivacyPolicy.tsx
@@ -1,12 +1,14 @@
-import { Box, HStack, Text, Skeleton } from "@chakra-ui/react";
+import { Box, HStack, Text, Skeleton, VStack } from "@chakra-ui/react";
 import MainFrame from "../../../components/MainFrame";
 import PrivacyPolicyAddModel from "./PrivacyPolicyAddModel";
 import { useGetPrivacyPolicyQuery } from "../../../Redux/Service/privacy.policy.service";
+import PrivacyPolicySkeleton from "./privacyPolicySkeleton";
+import { Spinner } from "../../../components/Sipnner/Spinner";
 
 
 const PrivacyPolicy = () => {
   // Fetch data using RTK Query with type annotations
-  const { data, isLoading } = useGetPrivacyPolicyQuery();
+  const { data, isLoading, isFetching } = useGetPrivacyPolicyQuery();
 
   console.log(isLoading);
   
@@ -16,51 +18,42 @@ const PrivacyPolicy = () => {
   console.log(data);
   console.log("====================================");
   
-  // Extract content array from the response
-  const content = data?.data?.[0]?.content;
 
   return (
-    <MainFrame>
-      <Box>
+    <MainFrame transperant={true}>
+      {isLoading?<Spinner/>:
+      <VStack  gap={4} pb={4}>
+      {data?.data?.map(({id,content}, index)=><VStack bg={'#fff'} 
+        boxShadow={'rgba(99, 99, 99, 0.2) 0px 2px 8px 0px'}  rounded={'lg'} p={3} key={id}>
         <HStack
           w={"100%"}
           justifyContent={"space-between"}
-          mb={4}
+         
           py={0}
-          px={3}
+          px={0}
         >
           <Text as={"span"} fontSize={"sm"} fontWeight={500} color={"#000"}>
             Privacy Policy
           </Text>
 
-          <HStack>
             <PrivacyPolicyAddModel />
-          </HStack>
         </HStack>
 
         {/* Render multiple skeletons or content based on loading state */}
-        {isLoading || !content ? (
-          <Box px={3} pb={3} w="90%">
-            <Skeleton height="20px" mb="10px" width="90%" />
-            <Skeleton height="20px" mb="15px" width="90%" />
-            <Skeleton height="20px" mb="10px" width="90%" />
-            <Skeleton height="20px" mb="10px" width="80%" />
-            <Skeleton height="20px" width="60%" />
-          </Box>
+        {isFetching || !content ? (
+          <PrivacyPolicySkeleton/>
         ) : (
           <Text
             as="p"
             fontSize="sm"
             fontWeight={400}
             color="#1D1D1D"
-            px={3}
-            w="85%"
-            mb="15px"
           >
             {content}
           </Text>
         )}
-      </Box>
+      </VStack>)}
+      </VStack>}
     </MainFrame>
   );
 };
diff --git a/src/Pages/ManageCMS/PrivacyPolicy/PrivacyPolicyAddModel.tsx b/src/Pages/ManageCMS/PrivacyPolicy/PrivacyPolicyAddModel.tsx
index 05eacd1..92503df 100644
--- a/src/Pages/ManageCMS/PrivacyPolicy/PrivacyPolicyAddModel.tsx
+++ b/src/Pages/ManageCMS/PrivacyPolicy/PrivacyPolicyAddModel.tsx
@@ -11,7 +11,7 @@ function PrivacyPolicyAddModel() {
                 {/* <Button bg={"transparent"} size="sm">
                     <MdOutlineRemoveRedEye style={{ cursor: "pointer", fontSize: "16px" }} />
                 </Button> */}
-                <Button bgColor={'#EEEEEE'} pl={3} pr={3} size={'xs'} color={'#000'}> <FaRegEdit color="#000" style={{ height: '14px', width: '14px' }} /> <Text color={"#000"} mt={1}>Edit</Text></Button>
+                <Button bgColor={'#EEEEEE'} pl={3} pr={3} size={'2xs'} color={'#000'}> <FaRegEdit color="#000" /> <Text fontSize={'xs'} color={"#000"} >Edit</Text></Button>
 
             </DialogTrigger>
 
diff --git a/src/Pages/ManageCMS/PrivacyPolicy/PrivacyPolicySkeleton.tsx b/src/Pages/ManageCMS/PrivacyPolicy/PrivacyPolicySkeleton.tsx
new file mode 100644
index 0000000..1244b85
--- /dev/null
+++ b/src/Pages/ManageCMS/PrivacyPolicy/PrivacyPolicySkeleton.tsx
@@ -0,0 +1,16 @@
+import { Box, Skeleton } from '@chakra-ui/react'
+import React from 'react'
+
+const PrivacyPolicySkeleton = () => {
+  return (
+    <Box px={3} pb={3} w="90%">
+            <Skeleton height="20px" mb="10px" width="90%" />
+            <Skeleton height="20px" mb="15px" width="90%" />
+            <Skeleton height="20px" mb="10px" width="90%" />
+            <Skeleton height="20px" mb="10px" width="80%" />
+            <Skeleton height="20px" width="60%" />
+          </Box>
+  )
+}
+
+export default PrivacyPolicySkeleton
\ No newline at end of file
diff --git a/src/components/MainFrame.tsx b/src/components/MainFrame.tsx
index d6a3404..79ce468 100644
--- a/src/components/MainFrame.tsx
+++ b/src/components/MainFrame.tsx
@@ -9,19 +9,20 @@ const MotionVStack = motion(VStack)
 interface MainFrameProps {
   children: React.ReactNode
   title?: string
+  transperant?:boolean
 }
 
-const MainFrame: FC<MainFrameProps> = ({ children }) => {
+const MainFrame: FC<MainFrameProps> = ({ children, transperant }) => {
   return (
-    <MotionVStack  rounded="lg" overflowY={'auto'} overflowX={'hidden'} {...OPACITY_ON_LOAD} w="100%" minH="93%"  p={0} pe={2} ps={1.5}  pb={2}>
+    <MotionVStack  rounded="lg" overflowY={'auto'} overflowX={'hidden'} {...OPACITY_ON_LOAD} w="100%" minH="93%"   pe={2} ps={1.5} pt={transperant?0:1}  pb={2}>
       <Box
         w="100%"
-        // h="100%"
-        bg="#ffffff"
+        h="100%"
+        bg={transperant?'transperant':"#ffffff"}
         // overflow={'scroll'}
         rounded="lg"
-        boxShadow={'rgba(99, 99, 99, 0.2) 0px 2px 8px 0px'}
-        pt={3}
+        boxShadow={transperant?'none':'rgba(99, 99, 99, 0.2) 0px 2px 8px 0px'}
+        pt={transperant?0:3}
         
       >
         {children}