rubix/src/components/UseCase/NewUseCase.jsx

/* eslint-disable react/jsx-key */
/* eslint-disable react/prop-types */
/* eslint-disable no-unused-vars */
// eslint-disable-next-line no-unused-vars
import React, { useEffect } from "react";
import { Box, Button, Container, Image, Text } from "@chakra-ui/react";
import { useParams } from "react-router-dom";
import { useGetUseCaseQuery } from "../../Redux/slice/useCaseSlice";
import Loader from "../Loader/Loader";
import NotFound from "../../pages/NotFound";
import img from "../../assets/images/pdfscreen.png";
const API_URL = import.meta.env.VITE_API_BASE_URL;

// eslint-disable-next-line react/prop-types
const NewUseCase = () => {
  const { title_slug } = useParams();
  console.log("title", title_slug);
  const { data, error, isLoading } = useGetUseCaseQuery();
  const useCases = data?.data?.rows;
  console.log(useCases);
  useEffect(() => {
    window.scrollTo(0, 0);
  }, []);

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

  const matchingUseCase = useCases
    ? useCases.find((item) => item.title_slug === title_slug)
    : null;

  console.log(matchingUseCase);
  return (
    <>
      {matchingUseCase ? (
        <div>
          <Box
            height={"75vh"}
            width={"100%"}
            backgroundImage={`url(${API_URL}/${matchingUseCase.bannerImage})`}
            backgroundRepeat={"no-repeat"}
            backgroundSize={"cover"}
            position="relative"
            sx={{
              "@media (max-width: 600px)": {
                height: "400px",
              },
            }}
          >
            <Box
              position="absolute"
              top={0}
              left={0}
              width="100%"
              height="100%"
              backgroundColor="rgba(0, 0, 0, 0.8)"
              display={"flex"}
              justifyContent={"center"}
              alignItems={"center"}
              flexDirection={"column"}
            >
              <Box
                w={"50vw"}
                sx={{
                  "@media (max-width: 600px)": {
                    width: "100vw",
                    padding: "2rem",
                  },
                }}
              >
                <Text
                  textAlign={"center"}
                  className="rubix-fw-700"
                  fontSize={"40px"}
                  color={"#fff"}
                  sx={{
                    "@media (max-width: 600px)": {
                      fontSize: "30px",
                    },
                  }}
                >
                  {matchingUseCase.title}
                </Text>
                <Text
                  textAlign={"center"}
                  className="rubix-fw-500"
                  fontSize={"20px"}
                  fontFamily={"Poppins"}
                  color={"#fff"}
                  sx={{
                    "@media (max-width: 600px)": {
                      fontSize: "16px",
                    },
                  }}
                >
                  {matchingUseCase.meta_description}
                </Text>
              </Box>
            </Box>
          </Box>

          <Box
            p={5}
            pb={14}
            backgroundColor={"#000000"}
            display={"flex"}
            justifyContent={"center"}
            flexDirection={"column"}
            alignItems={"center"}
            gap={16}
            w={"100%"}
          >
            <Box
              display={"flex"}
              justifyContent={"center"}
              flexDirection={"column"}
              alignItems={"start"}
              gap={7}
              pt={5}
              width={"85vw"}
              sx={{
                "@media (max-width: 600px)": {
                  width: "100%",
                },
              }}
            >
              {/* ========[ Head-Para ]====== */}
              {matchingUseCase.content != "<p><br></p>" ? (
                <Box
                  width={"65vw"}
                  className="usecases"
                  sx={{
                    "@media (max-width: 600px)": {
                      width: "100%",
                    },
                  }}
                >
                  <Text
                    pb={5}
                    className="rubix-text-small"
                    dangerouslySetInnerHTML={{
                      __html: matchingUseCase.content,
                    }}
                  />
                </Box>
              ) : null}

              <Box
                width={"75vw"}
                sx={{
                  "@media (max-width: 600px)": {
                    width: "100%",
                  },
                }}
              ></Box>
            </Box>
            {matchingUseCase.attachments.length >= 1 ? (
              <Text
                className="rubix-fw-500"
                fontSize="3xl"
                textColor={"#ffffff"}
                marginBottom={"1rem"}
                marginInline={"3rem"}
                sx={{
                  "@media (max-width: 600px)": {
                    fontSize: "22px",
                    textAlign: "center",
                  },
                }}
              >
                Use Cases
              </Text>
            ) : (
              ""
            )}
            <Container
              maxW="container.xl"
              marginBottom={"2rem"}
              display={"flex"}
              justifyContent={"start"}
              gap={"3rem"}
              flexWrap={"wrap"}
            >
              {matchingUseCase.attachments.map((item) => (
                <Box
                  key={item.id}
                  width={"275px"}
                  background={"#15181E"}
                  borderRadius={"10px"}
                  minHeight={"360px"}
                  padding={"15px"}
                  // marginInline={"3rem"}
                  sx={{
                    "@media (max-width: 600px)": {
                      width: "100%",
                      minHeight: "0",
                    },
                  }}
                >
                  <Image
                    src={img}
                    width={"70%"}
                    margin={"0 auto"}
                    sx={{
                      "@media (max-width: 600px)": {
                        width: "70%",
                      },
                    }}
                  />
                  <Box paddingTop={"2rem"}>
                    <Text
                      color={"#fff"}
                      fontSize={"18px"}
                      marginBottom={"20px"}
                      minHeight={"80px"}
                      maxWidth={"420px"}
                    >
                      {item.originalname}
                    </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={item.originalname}
                          href={`${API_URL}/${item.path}`}
                          target="_blank"
                        >
                          <Button
                            position={"relative"}
                            backgroundColor={"transparent"}
                            color={"#fff"}
                            fontFamily={"Poppins"}
                            fontWeight={"400"}
                            _hover={{
                              backgroundColor: "transparent",
                            }}
                          >
                            Download
                          </Button>
                        </a>
                      }
                    </Box>
                  </Box>
                </Box>
              ))}
            </Container>
          </Box>
        </div>
      ) : (
        <NotFound />
      )}
    </>
  );
};

export default NewUseCase;