37 lines
1.4 KiB
JavaScript
37 lines
1.4 KiB
JavaScript
import { themes } from 'shared/themes/index.mjs'
|
|
import { useTranslation } from 'next-i18next'
|
|
import { useTheme } from 'shared/hooks/use-theme.mjs'
|
|
import { ModalWrapper } from 'shared/components/wrappers/modal.mjs'
|
|
|
|
export const ns = ['themes']
|
|
|
|
export const ModalThemePicker = () => {
|
|
const { setTheme } = useTheme()
|
|
const { t } = useTranslation(ns)
|
|
|
|
return (
|
|
<ModalWrapper>
|
|
<div className="grid gap-2 p-4 grid-cols-1 max-w-lg w-full">
|
|
<h2>{t('themes:chooseYourTheme')}</h2>
|
|
{Object.keys(themes).map((theme) => (
|
|
<div className="flex flex-row gap-2" key={theme}>
|
|
<button
|
|
data-theme={theme}
|
|
key={theme}
|
|
onClick={() => setTheme(theme)}
|
|
className="btn btn-lg grow bg-base-100 border border-base-200 border-solid text-base-content hover:bg-primary hover:text-primary-content hover:border-primary shadow hover:shadow-lg"
|
|
>
|
|
{t(`${theme}Theme`)}
|
|
<span className="hidden lg:block lg:grow"></span>
|
|
<div className="flex flex-shrink-0 flex-wrap gap-1 items-center hidden lg:flex">
|
|
{['primary', 'secondary', 'accent', 'neutral'].map((color) => (
|
|
<div key={color} className={`bg-${color} w-8 h-8 rounded-full border-2 `}></div>
|
|
))}
|
|
</div>
|
|
</button>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</ModalWrapper>
|
|
)
|
|
}
|