add cookie consent popover

Signed-off-by: Aabid Sofi <mailtoaabid01@gmail.com>

Author: aabidsofi19

src/components/CookieConsent/index.js

@@ -0,0 +1,80 @@
+
+import React, { useEffect, useState } from "react";
+import {
+    Snackbar,
+    Typography,
+    Box,
+    Paper,
+    Stack,
+} from "@mui/material";
+
+
+import Button from "../../reusecore/Button";
+
+const CookieConsent = () => {
+    const [open, setOpen] = useState(false);
+
+    useEffect(() => {
+        const consent = localStorage.getItem("cookie_consent");
+        if (!consent) {
+            setOpen(true);
+        }
+    }, []);
+
+    const handleResponse = () => {
+        localStorage.setItem("cookie_consent", response);
+        setOpen(false);
+    };
+
+    return (
+        <Snackbar
+            open={open}
+            anchorOrigin={{ vertical: "bottom", horizontal: "center" }}
+        >
+            <Paper
+                elevation={6}
+                sx={{
+                    p: 2,
+                    maxWidth: 420,
+                    borderRadius: 2,
+                }}
+            >
+                <Stack spacing={2}>
+                    <Typography variant="body1" fontWeight="500">
+                        🍪 We value your privacy
+                    </Typography>
+                    <Typography variant="body2" color="text.secondary">
+                        We use cookies to enhance your browsing experience. By clicking
+                        "Accept", you consent to our use of cookies. Read more in our{" "}
+                        <a href="/privacy" target="_blank" rel="noopener noreferrer">
+                            Privacy Policy
+                        </a>
+                        .
+                    </Typography>
+
+                    <Box display="flex" justifyContent="flex-end" gap={1}>
+                        <Button
+                            variant="outlined"
+                            size="small"
+                            $outlined
+                            onClick={() => handleResponse("declined")}
+                        >
+                            Decline
+                        </Button>
+                        <Button
+                            variant="contained"
+                            size="small"
+                            $secondary
+                            onClick={() => handleResponse("accepted")}
+                        >
+                            Accept
+                        </Button>
+                    </Box>
+                </Stack>
+            </Paper>
+        </Snackbar>
+    );
+};
+
+export default CookieConsent;
+

src/components/layout.js

@@ -14,6 +14,7 @@ import Navigation from "../sections/General/Navigation";
 import Footer from "../sections/General/Footer";
 // import TopPromotionalBanner from "./TopPromotionalBanner";
 import { GlobalStyle } from "../sections/app.style";
+import CookieConsent from "./CookieConsent";
 
 const Layout = ({ children }) => {
 
@@ -22,6 +23,7 @@ const Layout = ({ children }) => {
       <GlobalStyle />
       {/* <TopPromotionalBanner /> */}
       <Navigation/>
+      <CookieConsent />
       {children}
       <ScrollToTopBtn />
       <Footer location={children.props.location} />
@@ -33,4 +35,4 @@ Layout.propTypes = {
   children: PropTypes.node.isRequired
 };
 
-export default Layout;
+export default Layout;

src/reusecore/Button/btn.style.js

@@ -35,6 +35,21 @@ const ButtonStyle = styled.button`
         margin-left: 8px;
     }
 
+    ${props => props.$outlined && css`
+        background: transparent;
+        border: 2px solid ${props => props.theme.blackFourToWhiteFour};
+        color: ${props => props.theme.blackToWhite};
+        &:hover{
+            box-shadow: 0 2px 10px ${props.theme.whiteFourToBlackFour};
+        }
+        &:active{
+            background: ${props => props.theme.lightGrey};
+            box-shadow: 0 2px 10px ${props.theme.blackFourToWhiteFour};
+            transform: scale(0.98);
+        }
+    `}
+
+
     ${props => props.$primary && css`
         color: ${props => props.theme.black};
         background: ${props => props.theme.highlightColor};