useCases pdf api implementation

src/components/UseCase/NewUseCase.jsx

@@ -3,11 +3,12 @@
 /* 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 { 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";
 
 // eslint-disable-next-line react/prop-types
 const NewUseCase = ({
@@ -201,6 +202,93 @@ const NewUseCase = ({
                 </Text> */}
               </Box>
             </Box>
+            {matchingUseCase.attachments.map((item) => (
+              <Container
+                maxW="container.xl"
+                marginBottom={"2rem"}
+                key={item.id}
+              >
+                <Box
+                  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={`https://rubix.betadelivery.com/${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>
       ) : (