proxyraye-nextjs/src/components/Layout/Header/Menu/Theme/index.tsx

31 lines
804 B
TypeScript

'use client'
import React from 'react';
import { TbMoon, TbSun } from 'react-icons/tb';
import { Cookies, DEFAULT_THEME, Themes } from '@/meta/settings';
import Icon from '../Icon';
import { setCookie } from '@/utils/cookies/write';
import { useCookies } from 'react-cookie';
const Theme: React.FC = () => {
const [cookies] = useCookies([Cookies.theme]);
const theme = cookies.theme ?? DEFAULT_THEME
const handleClick = async () => {
const newTheme = theme == Themes.dark ? Themes.light : Themes.dark
await setCookie(Cookies.theme, newTheme)
}
return (
<Icon handleClick={handleClick}>
{theme == Themes.dark && <TbMoon size={24} />}
{theme == Themes.light && <TbSun size={24} />}
</Icon>
);
};
export default Theme;