sosokker/SOS12
1
0
Fork 0
mirror of https://github.com/Sosokker/SOS12.git synced 2025-12-18 12:14:06 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add cookie to checkbox/Add inv text fill menu

Browse Source
This commit is contained in:
Sirin Puenggun 2023-07-03 16:40:35 +07:00
parent edeccb7f55
commit 0d0c4c89dd
4 changed files with 91 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -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",

3
src/components/Menu.jsx
View File

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

152
src/components/Problems.jsx
View File

@ -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,81 +10,93 @@ 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 {SectionWrapper} from "../hoc";
import Preproblems from "./Preproblems";
import myimage from '../../public/images/syntax.jpeg';
import { SectionWrapper } from '../hoc';
import Cookies from 'js-cookie';
export const ThemeContext = createContext(null);
const defaultTheme = createTheme();
const CardItem = ({ card }) => {
const [checked, setChecked] = useState(false);
useEffect(() => {
const savedCheckedValue = Cookies.get(`checkboxValue_${card.id}`);
if (savedCheckedValue === 'true') {
setChecked(true);
}
}, [card.id]);
const handleCheckboxChange = (event) => {
setChecked(event.target.checked);
Cookies.set(`checkboxValue_${card.id}`, event.target.checked, {
expires: 9999,
});
};
return (
<Grid item xs={12} sm={6} md={4} key={card.id}>
<Card
sx={{
height: '100%',
display: 'flex',
flexDirection: 'column',
}}
>
<CardMedia
component="div"
sx={{
pt: '56.25%',
height: 0,
}}
image={myimage}
/>
<CardContent sx={{ flexGrow: 1 }}>
<Typography
gutterBottom
variant="h5"
component="h2"
color="#7DD6F6"
>
{card.title}
</Typography>
<Typography color="aliceblue">{card.describe}</Typography>
</CardContent>
<CardActions>
<Button size="small">
<a href={card.link} target="_blank" rel="noopener noreferrer">
View
</a>
</Button>
<Checkbox
className="jodeCheckBox"
checked={checked}
onChange={handleCheckboxChange}
/>
</CardActions>
</Card>
</Grid>
);
};
const Problems = () => {
const [theme, setTheme] = useState('dark');
const toggleTheme = () => {
setTheme(theme === 'light' ? 'dark' : 'light');
}
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%',
display: 'flex',
flexDirection: 'column',
}}
>
<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"
color="#7DD6F6">
{card.title}
</Typography>
<Typography color="aliceblue">
{card.describe}
</Typography>
</CardContent>
<CardActions>
<Button size="small"><a
href={card.link}>View</a></Button>
<Checkbox className="jodeCheckBox"/>
</CardActions>
</Card>
</Grid>
))}
</Grid>
</div>
</Container>
</main>
</ThemeProvider> */
</ThemeContext.Provider>
</div>
);
}
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>
</div>
);
};
export default SectionWrapper(Problems, "");

5
yarn.lock
View File

@ -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"