VSinerva/freesewing
1
0
Fork 0
Code Activity

local and theme pickers working with headless ui

Browse source
This commit is contained in:
Enoch Riese 2022-07-01 15:58:39 -05:00
parent 5766f274c0
commit c1b53465cf
5 changed files with 163 additions and 54 deletions
Download patch file Download diff file Expand all files Collapse all files

67
sites/shared/components/locale-picker.js
View file

@ -3,38 +3,59 @@ import LocaleIcon from 'shared/components/icons/i18n.js'
import { useRouter } from 'next/router'
import { useTranslation } from 'next-i18next'
import Link from 'next/link'
import Picker, {PickerLink} from './picker';
import { Menu } from '@headlessui/react'
const LocalePicker = ({ app, iconOnly=false }) => {
const { t } = useTranslation(['locales'])
const router = useRouter()
const pickerProps = {
iconOnly,
Icon: LocaleIcon,
selectedItem: t(router.locale)
}
return (
<div className="dropdown dropdown-end w-auto">
<div tabIndex="0" className={ iconOnly
? 'btn btn-sm'
: `m-0 btn btn-neutral flex flex-row gap-2 btn-outline
md:btn-ghost
hover:bg-neutral hover:border-neutral-content
`
}>
<LocaleIcon />
{!iconOnly && <span>{t(router.locale)}</span>}
</div>
<ul tabIndex="0" className="p-2 shadow menu dropdown-content bg-base-100 rounded-box w-52">
<Picker {...pickerProps} >
{router.locales.map(locale => (
<li key={locale}>
<Link href={router.asPath} locale={locale}>
<a className="btn btn-ghost text-base-content hover:bg-base-200">
<span className="text-base-content">
{t(locale)}
</span>
</a>
</Link>
</li>
<PickerLink
locale={locale}
href={router.asPath}
key={locale}>
{t(locale)}
</PickerLink>
))}
</ul>
</div>
</Picker>
)
// return (
// <div className="dropdown dropdown-end w-auto">
// <div tabIndex="0" className={ iconOnly
// ? 'btn btn-sm'
// : `m-0 btn btn-neutral flex flex-row gap-2 btn-outline
// md:btn-ghost
// hover:bg-neutral hover:border-neutral-content
// `
// }>
// <LocaleIcon />
// {!iconOnly && <span>{t(router.locale)}</span>}
// </div>
// <ul tabIndex="0" className="p-2 shadow menu dropdown-content bg-base-100 rounded-box w-52">
// {router.locales.map(locale => (
// <li key={locale}>
// <Link href={router.asPath} locale={locale}>
// <a className="btn btn-ghost text-base-content hover:bg-base-200">
// <span className="text-base-content">
// {t(locale)}
// </span>
// </a>
// </Link>
// </li>
// ))}
// </ul>
// </div>
// )
}
export default LocalePicker