Files
SSA-Admin-Panel/src/Pages/ManageCMS/AboutUs/AboutUs.tsx
2025-02-25 13:58:13 +05:30

133 lines
4.5 KiB
TypeScript

// import { Badge, HStack, Text, VStack } from "@chakra-ui/react";
// import MainFrame from "../../../components/MainFrame"
// import { useGetAboutUsQuery } from "../../../Redux/Service/manage.aboutus.service";
// import { Spinner } from "../../../components/Sipnner/Spinner";
// import GlobalStateContext from "../../../Contexts/GlobalStateContext";
// import { useContext, useEffect } from "react";
// import AboutUsAddModel from "./AboutUsAddModel";
// const AboutUs = () => {
// const { data, isLoading, isFetching } = useGetAboutUsQuery();
// // const content = data?.data
// console.log('====================================');
// console.log(data);
// console.log('====================================');
// const context = useContext(GlobalStateContext);
// if (!context) throw new Error('App must be used within a GlobalStateProvider');
// const { setIsBarLoading } = context;
// useEffect(() => {
// setIsBarLoading(isFetching)
// }, [data])
// return (
// <MainFrame transperant={true}>
// <VStack gap={4} pb={4} pt={0}>
// {isLoading || isFetching ?
// <Spinner /> : data?.data?.map(({ id, content, about_language }) => <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"}
// py={0}
// px={0}
// >
// <Text as={"span"} fontSize={"sm"} fontWeight={500} color={"#000"}>
// About Us <Badge variant={'surface'} colorPalette="cyan" ms={2} size={'sm'} fontSize={'xs'} px={2}>🎓 {about_language?.language_name}</Badge>
// </Text>
// {/* <AboutUsAddModel /> */}
// <AboutUsAddModel/>
// </HStack>
// <Text
// as="p"
// fontSize="sm"
// fontWeight={400}
// color="#1D1D1D"
// >
// {content}
// </Text>
// </VStack>)}
// </VStack>
// </MainFrame>
// )
// }
// export default AboutUs
import { Badge, HStack, Stack, Text, VStack } from "@chakra-ui/react";
import MainFrame from "../../../components/MainFrame";
import { useGetAboutUsQuery } from "../../../Redux/Service/manage.aboutus.service";
import { Spinner } from "../../../components/Sipnner/Spinner";
import GlobalStateContext from "../../../Contexts/GlobalStateContext";
import { useContext, useEffect } from "react";
import AboutUsAddModel from "./AboutUsAddModel";
const AboutUs = () => {
const { data, isLoading, isFetching } = useGetAboutUsQuery();
console.log("Fetched About Us Data:", data);
const context = useContext(GlobalStateContext);
if (!context) throw new Error("App must be used within a GlobalStateProvider");
const { setIsBarLoading } = context;
useEffect(() => {
setIsBarLoading(isFetching);
}, [isFetching, setIsBarLoading]);
return (
<MainFrame transperant={true}>
<VStack gap={4} pb={4} pt={0}>
<Stack bg={"#fff"} w={"100%"} mt={2} p={4} borderRadius={4}><Text color={"black"} textAlign={"left"} fontWeight={"600"} > About Us
</Text></Stack>
{isLoading || isFetching ? (
<Spinner />
) : (
data?.data?.map(({ id, content, about_language }) => (
<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"} py={0} px={0}>
<Text as={"span"} fontSize={"sm"} fontWeight={500} color={"#000"}>
<Badge
variant={"surface"}
colorPalette="cyan"
ms={2}
size={"sm"}
fontSize={"xs"}
px={2}
>
🎓 {about_language?.language_name}
</Badge>
</Text>
{/* Pass Data to AboutUsAddModel */}
<AboutUsAddModel aboutUsData={{ id, content, about_language }} />
</HStack>
<Text as="p" fontSize="sm" fontWeight={400} color="#1D1D1D">
{/* {content} */}
<div dangerouslySetInnerHTML={{ __html: content }} />
</Text>
</VStack>
))
)}
</VStack>
</MainFrame>
);
};
export default AboutUs;