rubix/src/components/ResourcesPage/tabInsideContent/WhitepaperDocs.jsx

/* eslint-disable no-unused-vars */
import { Box, Button, Image, Text } from "@chakra-ui/react";
import { Link } from "react-router-dom";
import cardimg from "../../../assets/images/CardImg.png";
import pdf from "../../../assets/pdf/Rubix.pdf";
import { useState } from "react";
import { useGetWhitePaperQuery } from "../../../Redux/slice/whitePaperSlice";
import Loader from "../../Loader/Loader";

const WhitepaperDocs = () => {
  const [currentPage, setCurrentPage] = useState(1);
  const pageSize = 5;

  const { data, isLoading, error } = useGetWhitePaperQuery({
    page: currentPage,
    pageSize,
  });

  if (isLoading) {
    return (
      <div>
        <Loader />
      </div>
    );
  }

  if (error) {
    return <div>Error: {error.message}</div>;
  }

  const docs = data?.data?.data?.rows;
  const totalPages = data?.data?.totalPages;
  // console.log(docs);

  function goToPage(page) {
    if (page >= 1 && page <= totalPages) {
      setCurrentPage(page);
    }
  }

  return (
    <Box
      display={"flex"}
      flexWrap={"wrap"}
      justifyContent={"space-between"}
      width={"100%"}
      sx={{
        "@media (max-width: 1024px)": {
          justifyContent: "space-around",
        },
      }}
    >
      {docs?.map((item) => (
        <Box marginBottom={"2rem"} key={item.id}>
          <Box
            width={"360px"}
            background={"#404040"}
            borderRadius={"10px"}
            minHeight={"362px"}
            padding={"15px"}
            sx={{
              "@media (max-width: 600px)": {
                width: "100%",
                minHeight: "0",
              },
            }}
          >
            <Image
              src={`https://rubix.betadelivery.com/${item.bannerImage}`}
              maxHeight={"160px"}
              width={"100%"}
              objectFit={"cover"}
              objectPosition={"center"}
            />
            <Box padding={"1rem"}>
              <Text
                color={"#fff"}
                fontSize={"25px"}
                marginBottom={"20px"}
                minHeight={"40px"}
                maxWidth={"420px"}
              >
                {item.title}
              </Text>
              <Box
                display={"flex"}
                alignItems={"center"}
                _hover={
                  {
                    //   flexDirection: "column-reverse",
                  }
                }
              >
                <Box
                  position={"relative"}
                  width={"10%"}
                  _before={{
                    content: '""',
                    width: "100%",
                    position: "absolute",
                    left: "0",
                    borderBottom: "2px solid #DE858E",
                    borderRadius: "5px",
                    zIndex: "2",
                  }}
                ></Box>
                <a download="RubiX_WhitePaper.pdf" href={pdf}>
                  <Button
                    position={"relative"}
                    backgroundColor={"transparent"}
                    color={"#fff"}
                    fontFamily={"Poppins"}
                    fontWeight={"400"}
                    _hover={{
                      backgroundColor: "transparent",
                    }}
                  >
                    View Document
                  </Button>
                </a>
              </Box>
            </Box>
          </Box>
        </Box>
      ))}
    </Box>
  );
};

export default WhitepaperDocs;