umami/components/settings/ThemeButton.js

45 lines
1.3 KiB
JavaScript
Raw Normal View History

2020-09-20 10:33:39 +02:00
import React from 'react';
2020-09-21 00:42:01 +02:00
import { useTransition, animated } from 'react-spring';
2020-09-20 10:33:39 +02:00
import Button from 'components/common/Button';
import useTheme from 'hooks/useTheme';
2020-09-21 00:42:01 +02:00
import Sun from 'assets/sun.svg';
import Moon from 'assets/moon.svg';
import styles from './ThemeButton.module.css';
import Icon from '../common/Icon';
2020-09-20 10:33:39 +02:00
export default function ThemeButton() {
const [theme, setTheme] = useTheme();
2020-09-21 00:42:01 +02:00
const transitions = useTransition(theme, theme => theme, {
from: {
opacity: 0,
2020-09-21 06:31:53 +02:00
transform: `translateY(${theme === 'light' ? '20px' : '-20px'}) scale(0.5)`,
2020-09-21 00:42:01 +02:00
},
enter: { opacity: 1, transform: 'translateY(0px) scale(1)' },
leave: {
opacity: 0,
2020-09-21 06:31:53 +02:00
transform: `translateY(${theme === 'light' ? '-20px' : '20px'}) scale(0.5)`,
2020-09-21 00:42:01 +02:00
},
});
2020-09-20 10:33:39 +02:00
function handleClick() {
setTheme(theme === 'light' ? 'dark' : 'light');
}
return (
2020-09-21 00:42:01 +02:00
<Button className={styles.button} variant="light" onClick={handleClick}>
{transitions.map(({ item, key, props }) =>
item === 'light' ? (
<animated.div key={key} style={props}>
<Icon icon={<Sun />} />
</animated.div>
) : (
<animated.div key={key} style={props}>
<Icon icon={<Moon />} />
</animated.div>
),
)}
</Button>
);
2020-09-20 10:33:39 +02:00
}