71 lines
2.8 KiB
JavaScript
71 lines
2.8 KiB
JavaScript
import { Fragment } from 'react'
|
|
import themes from 'shared/themes/index.js'
|
|
import { ThemeIcon, DownIcon } from 'shared/components/icons.mjs'
|
|
import { useTranslation } from 'next-i18next'
|
|
import { Popover, Transition } from '@headlessui/react'
|
|
import { useTheme } from 'shared/hooks/use-theme.mjs'
|
|
|
|
export const ns = ['themes']
|
|
|
|
export const ThemePicker = ({ app, iconOnly = false, bottom = false }) => {
|
|
const [theme, setTheme] = useTheme()
|
|
const { t } = useTranslation(ns)
|
|
|
|
return (
|
|
<Popover className="relative">
|
|
{() => (
|
|
<>
|
|
<Popover.Button
|
|
className={`h-12 group border-0 inline-flex items-center px-3 text-base
|
|
text-neural-content hover:bg-secondary hover:bg-opacity-50`}
|
|
>
|
|
<ThemeIcon />
|
|
{!iconOnly && (
|
|
<span className="ml-4 font-medium capitalize" suppressHydrationWarning={true}>
|
|
{t(`${theme}Theme`)}
|
|
</span>
|
|
)}
|
|
<DownIcon className={`ml-2 h-5 w-5 ${bottom ? 'rotate-180' : ''}`} aria-hidden="true" />
|
|
</Popover.Button>
|
|
<Transition
|
|
as={Fragment}
|
|
enter="transition ease-out duration-200"
|
|
enterFrom="opacity-0 translate-y-1"
|
|
enterTo="opacity-100 translate-y-0"
|
|
leave="transition ease-in duration-150"
|
|
leaveFrom="opacity-100 translate-y-0"
|
|
leaveTo="opacity-0 translate-y-1"
|
|
>
|
|
<Popover.Panel
|
|
className={`absolute z-10 mb-3 w-64 transform px-4 sm:px-0 lg:max-w-xl right-0 ${
|
|
iconOnly ? 'translate-x-4' : ''
|
|
} ${bottom ? 'bottom-10' : 'top-12'}`}
|
|
>
|
|
<div className="overflow-hidden rounded-lg shadow-lg">
|
|
<div className="relative grid gap-2 bg-base-100 p-4 grid-cols-1">
|
|
{Object.keys(themes).map((theme) => (
|
|
<button
|
|
data-theme={theme}
|
|
key={theme}
|
|
onClick={() => setTheme(theme)}
|
|
className="btn bg-base-100 text-base-content hover:bg-base-100 hover:-ml-1"
|
|
>
|
|
<span>{theme}</span>
|
|
<span className="grow"></span>
|
|
<div className="flex flex-shrink-0 flex-wrap gap-1 h-1/2">
|
|
<div className="bg-primary w-2 rounded"></div>
|
|
<div className="bg-secondary w-2 rounded"></div>
|
|
<div className="bg-accent w-2 rounded"></div>
|
|
<div className="bg-neutral w-2 rounded"></div>
|
|
</div>
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</Popover.Panel>
|
|
</Transition>
|
|
</>
|
|
)}
|
|
</Popover>
|
|
)
|
|
}
|