update ThemeSwitcher
This commit is contained in:
parent
8585368349
commit
76327f8e75
|
@ -1,9 +1,30 @@
|
|||
import React, { useState } from 'react';
|
||||
import { ToggleButton, ToggleButtonGroup } from '@mui/material';
|
||||
import React from 'react';
|
||||
import DarkModeIcon from '@mui/icons-material/DarkMode';
|
||||
import LightModeIcon from '@mui/icons-material/LightMode';
|
||||
import { THEMES } from 'types/theme';
|
||||
import ThemeToggler from './ThemeToggler';
|
||||
|
||||
export default function ThemeSwitcher() {
|
||||
const [theme, setTheme] = useState<THEMES>(THEMES.DARK);
|
||||
|
||||
return <ThemeToggler theme={theme} setTheme={setTheme} />;
|
||||
interface Iprops {
|
||||
theme: THEMES;
|
||||
setTheme: (theme: THEMES) => void;
|
||||
}
|
||||
export default function ThemeSwitcher({ theme, setTheme }: Iprops) {
|
||||
const handleChange = (event, theme: THEMES) => {
|
||||
setTheme(theme);
|
||||
};
|
||||
|
||||
return (
|
||||
<ToggleButtonGroup
|
||||
color="primary"
|
||||
size="small"
|
||||
value={theme}
|
||||
exclusive
|
||||
onChange={handleChange}>
|
||||
<ToggleButton value={THEMES.LIGHT}>
|
||||
<LightModeIcon />
|
||||
</ToggleButton>
|
||||
<ToggleButton value={THEMES.DARK}>
|
||||
<DarkModeIcon />
|
||||
</ToggleButton>
|
||||
</ToggleButtonGroup>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -1,30 +0,0 @@
|
|||
import { ToggleButton, ToggleButtonGroup } from '@mui/material';
|
||||
import React from 'react';
|
||||
import DarkModeIcon from '@mui/icons-material/DarkMode';
|
||||
import LightModeIcon from '@mui/icons-material/LightMode';
|
||||
import { THEMES } from 'types/theme';
|
||||
interface Iprops {
|
||||
theme: THEMES;
|
||||
setTheme: (theme: THEMES) => void;
|
||||
}
|
||||
export default function ThemeToggler({ theme, setTheme }: Iprops) {
|
||||
const handleChange = (event, theme: THEMES) => {
|
||||
setTheme(theme);
|
||||
};
|
||||
|
||||
return (
|
||||
<ToggleButtonGroup
|
||||
color="primary"
|
||||
size="small"
|
||||
value={theme}
|
||||
exclusive
|
||||
onChange={handleChange}>
|
||||
<ToggleButton value={THEMES.LIGHT}>
|
||||
<LightModeIcon />
|
||||
</ToggleButton>
|
||||
<ToggleButton value={THEMES.DARK}>
|
||||
<DarkModeIcon />
|
||||
</ToggleButton>
|
||||
</ToggleButtonGroup>
|
||||
);
|
||||
}
|
|
@ -18,6 +18,7 @@ export enum LS_KEYS {
|
|||
LOGS = 'logs',
|
||||
USER_DETAILS = 'userDetails',
|
||||
COLLECTION_SORT_BY = 'collectionSortBy',
|
||||
THEME = 'theme',
|
||||
}
|
||||
|
||||
export const setData = (key: LS_KEYS, value: object) => {
|
||||
|
|
Loading…
Reference in a new issue