Cédric FAMIBELLE-PRONZOLA
71 lines
1.6 KiB
JavaScript
71 lines
1.6 KiB
JavaScript
import PropTypes from 'prop-types'
|
|
import Image from 'next/image'
|
|
import {styled} from '@mui/material/styles'
|
|
import {Box} from '@mui/material'
|
|
|
|
import lightSwitch from '../public/theme-switch/light.png'
|
|
import darkSwitch from '../public/theme-switch/dark.png'
|
|
|
|
const PREFIX = 'switch-theme'
|
|
|
|
const classes = {
|
|
switch: `${PREFIX}-switch`,
|
|
switchFixed: `${PREFIX}-switchFixed`
|
|
}
|
|
|
|
const StyledBox = styled(Box)({
|
|
[`& .${classes.switch}`]: {
|
|
position: 'absolute',
|
|
right: '1em',
|
|
top: '60px',
|
|
zIndex: 1,
|
|
cursor: 'pointer'
|
|
},
|
|
[`& .${classes.switchFixed}`]: {
|
|
position: 'fixed',
|
|
right: '1em',
|
|
top: '70px',
|
|
zIndex: 9990,
|
|
cursor: 'pointer'
|
|
}
|
|
})
|
|
|
|
export default function SwitchTheme({switchFixed, mode, setMode}) {
|
|
const handleClick = seletedMode => {
|
|
localStorage.setItem('oki-theme', seletedMode)
|
|
setMode(seletedMode)
|
|
}
|
|
|
|
return (
|
|
<StyledBox>
|
|
<div className={switchFixed ? classes.switchFixed : classes.switch} >
|
|
{mode === 'dark' ? (
|
|
<Image
|
|
alt='Switch theme to light'
|
|
width={24}
|
|
height={24}
|
|
src={darkSwitch}
|
|
quality={10}
|
|
onClick={() => handleClick('light')}
|
|
/>
|
|
) : (
|
|
<Image
|
|
alt='Switch theme to dark'
|
|
width={24}
|
|
height={24}
|
|
src={lightSwitch}
|
|
quality={10}
|
|
onClick={() => handleClick('dark')}
|
|
/>
|
|
)}
|
|
</div>
|
|
</StyledBox>
|
|
)
|
|
}
|
|
|
|
SwitchTheme.propTypes = {
|
|
switchFixed: PropTypes.bool.isRequired,
|
|
mode: PropTypes.oneOf(['light', 'dark']),
|
|
setMode: PropTypes.func.isRequired
|
|
}
|