32 lines
809 B
TypeScript
32 lines
809 B
TypeScript
import { useTranslation } from "react-i18next";
|
|
import { FiMoon, FiSun } from "react-icons/fi";
|
|
import useTheme from "../../hooks/useTheme";
|
|
import RoundButtonBase from "../atoms/RoundButtonBase";
|
|
import IconBase from "../molecules/IconBase";
|
|
|
|
const ThemeButton = () => {
|
|
const [isDark, toggleTheme] = useTheme();
|
|
const { t } = useTranslation();
|
|
return (
|
|
<RoundButtonBase
|
|
buttonProps={{
|
|
className: "swap swap-rotate btn btn-outline btn-circle",
|
|
onClick: toggleTheme,
|
|
}}
|
|
tooltipText={t("button.action.theme")}
|
|
>
|
|
<input checked={isDark} className="hidden" type="checkbox" readOnly />
|
|
<IconBase>
|
|
<div className="swap-on">
|
|
<FiSun />
|
|
</div>
|
|
<div className="swap-off">
|
|
<FiMoon />
|
|
</div>
|
|
</IconBase>
|
|
</RoundButtonBase>
|
|
);
|
|
};
|
|
|
|
export default ThemeButton;
|