feat: analytics notice

src/AnalyticsNotice.tsx

@@ -0,0 +1,85 @@
+import React from 'react';
+import MuiAlert, { AlertProps } from "@mui/material/Alert";
+import Snackbar from "@mui/material/Snackbar";
+import Button from '@mui/material/Button';
+import IconButton from '@mui/material/IconButton';
+import CloseIcon from '@mui/icons-material/Close';
+import Modal from '@mui/material/Modal';
+import Box from '@mui/material/Box';
+import Typography from "@mui/material/Typography";
+
+const modalStyle = {
+    position: 'absolute',
+    top: '50%',
+    left: '50%',
+    transform: 'translate(-50%, -50%)',
+    width: 400,
+    bgcolor: 'background.paper',
+    border: '2px solid #000',
+    boxShadow: 24,
+    p: 4,
+};
+
+const Alert = React.forwardRef<HTMLDivElement, AlertProps>(function Alert(
+    props,
+    ref,
+) {
+    return <MuiAlert elevation={6} ref={ref} variant="filled" {...props} />;
+});
+export default function AnalyticsNotice() {
+    const [open, setOpen] = React.useState(window.localStorage.getItem('analyticsNotice') !== 'false');
+
+    const [modalOpen, setModalOpen] = React.useState(false);
+    const handleModalOpen = () => setModalOpen(true);
+    const handleModalClose = () => setModalOpen(false);
+    const handleClose = (_event?: React.SyntheticEvent | Event, reason?: string) => {
+        if (reason === 'clickaway') {
+            return;
+        }
+
+        setOpen(false);
+        setModalOpen(false);
+        window.localStorage.setItem('analyticsNotice', 'false');
+    };
+
+    const action = (
+        <React.Fragment>
+            <Button color="secondary" size="small" onClick={handleModalOpen} sx={{ color: 'white' }}>
+                WAIT WHAT?
+            </Button>
+            <IconButton
+                size="small"
+                aria-label="close"
+                color="inherit"
+                onClick={handleClose}
+            >
+                <CloseIcon fontSize="small" sx={{ color: 'white' }}/>
+            </IconButton>
+        </React.Fragment>
+    );
+    return (
+        <div>
+            <Snackbar open={open} onClose={handleClose} action={action}>
+                <Alert severity="info" action={action}>hi this website uses <a href='https://umami.is' style={{ color: "white" }}><u>umami</u></a> for analytics</Alert>
+            </Snackbar>
+            <Modal
+                open={modalOpen}
+                onClose={() => handleClose()}
+                aria-labelledby="modal-modal-title"
+                aria-describedby="modal-modal-description"
+            >
+                <Box sx={modalStyle}>
+                    <Typography id="modal-modal-title" variant="h6" component="h2">
+                        Analytics
+                    </Typography>
+                    <Typography id="modal-modal-description" sx={{ mt: 2 }}>
+                        Umami is used to track page visits. These aren't sold to anyone and are just to see what you guys like.
+
+                        Endpoint is https://analytics.srizan.dev
+                    </Typography>
+                </Box>
+            </Modal>
+        </div>
+
+    )
+}

src/main.tsx

@@ -6,6 +6,7 @@ import { createBrowserRouter, RouterProvider } from "react-router-dom";
 import { ThemeProvider, createTheme } from '@mui/material/styles';
 import Blog from "./Blog.tsx";
 import {BlogPost} from "./BlogPost.tsx";
+import AnalyticsNotice from "./AnalyticsNotice.tsx";
 
 const router = createBrowserRouter([
     {
@@ -40,6 +41,7 @@ prefersDarkMode.addEventListener('change', () => {
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <React.StrictMode>
       <ThemeProvider theme={darkTheme}>
+          <AnalyticsNotice />
           <RouterProvider router={router} />
       </ThemeProvider>
   </React.StrictMode>,