2022-12-16 03:26:42 -08:00
|
|
|
import { useTranslation } from 'next-i18next'
|
|
|
|
import { useTheme } from 'next-themes'
|
|
|
|
import ThemesIcon from './icons/ThemesIcon'
|
|
|
|
import { THEMES } from './settings/DisplaySettings'
|
|
|
|
import { LinkButton } from './shared/Button'
|
|
|
|
import IconDropMenu from './shared/IconDropMenu'
|
|
|
|
|
|
|
|
const ThemeSwitcher = () => {
|
|
|
|
const { t } = useTranslation('settings')
|
|
|
|
const { theme, setTheme } = useTheme()
|
|
|
|
return (
|
|
|
|
<IconDropMenu
|
|
|
|
icon={<ThemesIcon className="h-5 w-5" />}
|
|
|
|
panelClassName="rounded-t-none"
|
|
|
|
>
|
|
|
|
{THEMES.map((value) => (
|
|
|
|
<LinkButton
|
2023-04-20 19:32:20 -07:00
|
|
|
className={`whitespace-nowrap font-normal ${
|
2022-12-16 03:26:42 -08:00
|
|
|
t(value) === theme ? 'text-th-active' : ''
|
|
|
|
}`}
|
|
|
|
onClick={() => setTheme(t(value))}
|
|
|
|
key={value}
|
|
|
|
>
|
|
|
|
{t(value)}
|
|
|
|
</LinkButton>
|
|
|
|
))}
|
|
|
|
</IconDropMenu>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
export default ThemeSwitcher
|