From 3a4519cb640fee59cdb4e6d9e3e9ddbcef46a37d Mon Sep 17 00:00:00 2001
From: Mo Tarbin <mhed.t91@gmail.com>
Date: Sun, 1 Sep 2024 14:11:08 -0400
Subject: Add CookiePermissionSnackbar component to Landing page, Better UI to
 selected dates

---
 src/views/Landing/CookiePermissionSnackbar.jsx | 40 ++++++++++++++++++++++++++
 src/views/Landing/Landing.jsx                  |  3 +-
 2 files changed, 42 insertions(+), 1 deletion(-)
 create mode 100644 src/views/Landing/CookiePermissionSnackbar.jsx

(limited to 'src/views/Landing')

diff --git a/src/views/Landing/CookiePermissionSnackbar.jsx b/src/views/Landing/CookiePermissionSnackbar.jsx
new file mode 100644
index 0000000..e786794
--- /dev/null
+++ b/src/views/Landing/CookiePermissionSnackbar.jsx
@@ -0,0 +1,40 @@
+import { Button, Snackbar } from '@mui/joy'
+import Cookies from 'js-cookie'
+import { useEffect, useState } from 'react'
+
+const CookiePermissionSnackbar = () => {
+  useEffect(() => {
+    const cookiePermission = Cookies.get('cookies_permission')
+
+    if (cookiePermission !== 'true') {
+      setOpen(true)
+    }
+  }, [])
+
+  const [open, setOpen] = useState(false)
+  const handleClose = () => {
+    // Cookies.set('cookies_permission', 'true')
+    setOpen(false)
+  }
+
+  return (
+    <Snackbar
+      open={open}
+      anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
+      onClose={(event, reason) => {
+        if (reason === 'clickaway') {
+          return
+        }
+        // Cookies.set('cookies_permission', 'true')
+        handleClose()
+      }}
+    >
+      We use cookies to ensure you get the best experience on our website.
+      <Button variant='soft' onClick={handleClose}>
+        Accept
+      </Button>
+    </Snackbar>
+  )
+}
+
+export default CookiePermissionSnackbar
diff --git a/src/views/Landing/Landing.jsx b/src/views/Landing/Landing.jsx
index 7e70a03..a323ecc 100644
--- a/src/views/Landing/Landing.jsx
+++ b/src/views/Landing/Landing.jsx
@@ -3,6 +3,7 @@ import AOS from 'aos'
 import 'aos/dist/aos.css'
 import { useEffect } from 'react'
 import { useNavigate } from 'react-router-dom'
+import CookiePermissionSnackbar from './CookiePermissionSnackbar'
 import DemoAssignee from './DemoAssignee'
 import DemoHistory from './DemoHistory'
 import DemoMyChore from './DemoMyChore'
@@ -52,7 +53,7 @@ const Landing = () => {
           mb: 5,
         }}
       ></Box>
-
+      <CookiePermissionSnackbar />
       <Footer />
     </Container>
   )
-- 
cgit