Add cookie to checkbox/Add inv text fill menu

package.json

@@ -19,6 +19,7 @@
     "@react-three/fiber": "^8.11.1",
     "add": "^2.0.6",
     "framer-motion": "^9.0.7",
+    "js-cookie": "^3.0.5",
     "maath": "^0.5.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

src/components/Menu.jsx

@@ -63,6 +63,9 @@ const Menu = () => {
       ))}
       </div>
       <StarsCanvas />
+      <div class="invisible">blankblankblankblankblankblankblankblankblankblankblank
+      blankblankblankblankblankblankblankblankblankblankblankblankblankblankblankblank
+      blankblankblankblankblankblankblankblankblankblankblankblankblankblankblank</div>
     </>
   );
 };

src/components/Problems.jsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import {createContext, useState} from 'react';
+import { createContext, useState, useEffect } from 'react';
 import Button from '@mui/material/Button';
 import Card from '@mui/material/Card';
 import CardActions from '@mui/material/CardActions';
@@ -10,36 +10,32 @@ import Grid from '@mui/material/Grid';
 import Typography from '@mui/material/Typography';
 import Container from '@mui/material/Container';
 import Checkbox from '@mui/material/Checkbox';
-import {createTheme, ThemeProvider} from '@mui/material/styles';
 import cards from '../constants/Card';
-import myimage from '../../public/images/syntax.jpeg'
+import myimage from '../../public/images/syntax.jpeg';
-import {SectionWrapper} from "../hoc";
+import { SectionWrapper } from '../hoc';
-import Preproblems from "./Preproblems";
+import Cookies from 'js-cookie';
 
 export const ThemeContext = createContext(null);
 
-const defaultTheme = createTheme();
+const CardItem = ({ card }) => {
+  const [checked, setChecked] = useState(false);
 
-const Problems = () => {
+  useEffect(() => {
-
+    const savedCheckedValue = Cookies.get(`checkboxValue_${card.id}`);
-    const [theme, setTheme] = useState('dark');
+    if (savedCheckedValue === 'true') {
-    const toggleTheme = () => {
+      setChecked(true);
-        setTheme(theme === 'light' ? 'dark' : 'light');
     }
+  }, [card.id]);
+
+  const handleCheckboxChange = (event) => {
+    setChecked(event.target.checked);
+    Cookies.set(`checkboxValue_${card.id}`, event.target.checked, {
+      expires: 9999,
+    });
+  };
+
   return (
-        <div className="Problems">
-            <Preproblems/>
-            <ThemeContext.Provider value={{theme, toggleTheme}}>
-                <ThemeProvider theme={defaultTheme}>
-                    <CssBaseline/>
-                    <main>
-                        <Container
-                            sx={{py: 8}} maxWidth="fit-content">
-                            <div className="flex mt-4 border border-gray-500 p-4">
-                                <Grid container spacing={4}>
-                                    {cards.map((card) => (
     <Grid item xs={12} sm={6} md={4} key={card.id}>
-                                            {/*<img src={require("./images/syntax.jpeg")} alt="jode"/>*/}
       <Card
         sx={{
           height: '100%',
@@ -50,41 +46,57 @@ const Problems = () => {
         <CardMedia
           component="div"
           sx={{
-                                                        // 16:9
             pt: '56.25%',
             height: 0,
-                                                        // objectFit: 'cover',
           }}
           image={myimage}
         />
-
         <CardContent sx={{ flexGrow: 1 }}>
-                                                    <Typography gutterBottom variant="h5" component="h2"
+          <Typography
-                                                                color="#7DD6F6">
+            gutterBottom
+            variant="h5"
+            component="h2"
+            color="#7DD6F6"
+          >
             {card.title}
           </Typography>
-                                                    <Typography color="aliceblue">
+          <Typography color="aliceblue">{card.describe}</Typography>
-                                                        {card.describe}
-                                                    </Typography>
         </CardContent>
         <CardActions>
-                                                    <Button size="small"><a
+        <Button size="small">
-                                                        href={card.link}>View</a></Button>
+          <a href={card.link} target="_blank" rel="noopener noreferrer">
-                                                    <Checkbox className="jodeCheckBox"/>
+            View
+          </a>
+        </Button>
+          <Checkbox
+            className="jodeCheckBox"
+            checked={checked}
+            onChange={handleCheckboxChange}
+          />
         </CardActions>
       </Card>
     </Grid>
-                                    ))}
+  );
+};
 
+const Problems = () => {
+
+  return (
+    <div className="Problems">
+          <CssBaseline />
+          <main>
+            <Container sx={{ py: 8 }} maxWidth="fit-content">
+              <div className="flex mt-4 border border-gray-500 p-4">
+                <Grid container spacing={4}>
+                  {cards.map((card) => (
+                    <CardItem card={card} key={card.id} />
+                  ))}
                 </Grid>
               </div>
             </Container>
           </main>
-                </ThemeProvider> */
-
-            </ThemeContext.Provider>
     </div>
   );
-}
+};
 
 export default SectionWrapper(Problems, "");

yarn.lock

@@ -1340,6 +1340,11 @@ jiti@^1.18.2:
   resolved "https://registry.yarnpkg.com/jiti/-/jiti-1.18.2.tgz#80c3ef3d486ebf2450d9335122b32d121f2a83cd"
   integrity sha512-QAdOptna2NYiSSpv0O/BwoHBSmz4YhpzJHyi+fnMRTXFjp7B8i/YG5Z8IfusxB1ufjcD2Sre1F3R+nX3fvy7gg==
 
+js-cookie@^3.0.5:
+  version "3.0.5"
+  resolved "https://registry.yarnpkg.com/js-cookie/-/js-cookie-3.0.5.tgz#0b7e2fd0c01552c58ba86e0841f94dc2557dcdbc"
+  integrity sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==
+
 "js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"