32 lines
908 B
TypeScript
32 lines
908 B
TypeScript
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
|
|
className={`whitespace-nowrap font-normal no-underline md:hover:text-th-fgd-1 ${
|
|
t(value) === theme ? 'text-th-active' : ''
|
|
}`}
|
|
onClick={() => setTheme(t(value))}
|
|
key={value}
|
|
>
|
|
{t(value)}
|
|
</LinkButton>
|
|
))}
|
|
</IconDropMenu>
|
|
)
|
|
}
|
|
|
|
export default ThemeSwitcher
|