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, 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";

// eslint-disable-next-line react/prop-types
const NewUseCase = ({
  useCase,
  bannerImage,
  bannerHeading,
  bannerSubHeading,
}) => {
  const { title_slug } = useParams();
  const { data, error, isLoading } = useGetUseCaseQuery();
  const useCases = data?.data?.rows;
  console.log(data?.data?.rows);
  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(https://rubix.betadelivery.com/${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"}
                  fontFamily={"Mona Sans"}
                  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 ]====== */}
              <Box
                width={"65vw"}
                sx={{
                  "@media (max-width: 600px)": {
                    width: "100%",
                  },
                }}
              >
                <Text
                  style={{ marginBottom: 6 }}
                  className="rubix-fw-500"
                  fontSize="3xl"
                  textColor={"#ffffff"}
                  sx={{
                    "@media (max-width: 600px)": {
                      fontSize: "22px",
                    },
                  }}
                >
                  {matchingUseCase.problem}
                </Text>
                <Text
                  textColor={"#ffffff"}
                  fontSize="xl"
                  sx={{
                    "@media (max-width: 600px)": {
                      fontSize: "14px",
                    },
                  }}
                >
                  {matchingUseCase.solution}
                </Text>
              </Box>

              <Box
                width={"75vw"}
                sx={{
                  "@media (max-width: 600px)": {
                    width: "100%",
                  },
                }}
              >
                {/* <Text
                  style={{ marginBottom: 6 }}
                  className="rubix-fw-500"
                  fontSize="2xl"
                  textColor={"#ffffff"}
                  sx={{
                    "@media (max-width: 600px)": {
                      fontSize: "16px",
                    },
                  }}
                >
                  {title}
                </Text>
                <Text
                  textColor={"#ffffff"}
                  fontSize="lg"
                  sx={{
                    "@media (max-width: 600px)": {
                      fontSize: "14px",
                    },
                  }}
                >
                  {description}
                </Text> */}
              </Box>
            </Box>
          </Box>
        </div>
      ) : (
        <NotFound />
      )}
    </>
  );
};

export default NewUseCase;