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 { THEMES } from 'types/theme';
|
||||||
import ThemeToggler from './ThemeToggler';
|
interface Iprops {
|
||||||
|
theme: THEMES;
|
||||||
export default function ThemeSwitcher() {
|
setTheme: (theme: THEMES) => void;
|
||||||
const [theme, setTheme] = useState<THEMES>(THEMES.DARK);
|
}
|
||||||
|
export default function ThemeSwitcher({ theme, setTheme }: Iprops) {
|
||||||
return <ThemeToggler theme={theme} setTheme={setTheme} />;
|
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',
|
LOGS = 'logs',
|
||||||
USER_DETAILS = 'userDetails',
|
USER_DETAILS = 'userDetails',
|
||||||
COLLECTION_SORT_BY = 'collectionSortBy',
|
COLLECTION_SORT_BY = 'collectionSortBy',
|
||||||
|
THEME = 'theme',
|
||||||
}
|
}
|
||||||
|
|
||||||
export const setData = (key: LS_KEYS, value: object) => {
|
export const setData = (key: LS_KEYS, value: object) => {
|
||||||
|
|
Loading…
Reference in a new issue