mirror of
https://github.com/umami-software/umami.git
synced 2026-02-06 21:57:16 +01:00
Moved code into src folder. Added build for component library.
This commit is contained in:
parent
7a7233ead4
commit
ede658771e
490 changed files with 749 additions and 442 deletions
38
src/components/input/ThemeButton.js
Normal file
38
src/components/input/ThemeButton.js
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
import { useTransition, animated } from 'react-spring';
|
||||
import { Button, Icon } from 'react-basics';
|
||||
import useTheme from 'components/hooks/useTheme';
|
||||
import Icons from 'components/icons';
|
||||
import styles from './ThemeButton.module.css';
|
||||
|
||||
export function ThemeButton() {
|
||||
const { theme, saveTheme } = useTheme();
|
||||
|
||||
const transitions = useTransition(theme, {
|
||||
initial: { opacity: 1 },
|
||||
from: {
|
||||
opacity: 0,
|
||||
transform: `translateY(${theme === 'light' ? '20px' : '-20px'}) scale(0.5)`,
|
||||
},
|
||||
enter: { opacity: 1, transform: 'translateY(0px) scale(1.0)' },
|
||||
leave: {
|
||||
opacity: 0,
|
||||
transform: `translateY(${theme === 'light' ? '-20px' : '20px'}) scale(0.5)`,
|
||||
},
|
||||
});
|
||||
|
||||
function handleClick() {
|
||||
saveTheme(theme === 'light' ? 'dark' : 'light');
|
||||
}
|
||||
|
||||
return (
|
||||
<Button variant="quiet" className={styles.button} onClick={handleClick}>
|
||||
{transitions((style, item) => (
|
||||
<animated.div key={item} style={style}>
|
||||
<Icon className={styles.icon}>{item === 'light' ? <Icons.Sun /> : <Icons.Moon />}</Icon>
|
||||
</animated.div>
|
||||
))}
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
|
||||
export default ThemeButton;
|
||||
Loading…
Add table
Add a link
Reference in a new issue