36 lines
1.3 KiB
JavaScript
36 lines
1.3 KiB
JavaScript
// Dependencies
|
|
import { useTranslation } from 'next-i18next'
|
|
import { collection } from 'site/hooks/use-design.mjs'
|
|
// Components
|
|
import { ModalWrapper } from 'shared/components/wrappers/modal.mjs'
|
|
import { Link } from 'shared/components/link.mjs'
|
|
|
|
export const ns = ['sde']
|
|
|
|
export const ModalDesignPicker = () => {
|
|
const { t } = useTranslation(ns)
|
|
|
|
return (
|
|
<ModalWrapper flex="col" justify="top lg:justify-center" slideFrom="left">
|
|
<div className="max-w-xl">
|
|
<h2>{t('sde:chooseATemplate')}</h2>
|
|
<div className="flex flex-row p-4 w-full flex-wrap gap-2">
|
|
{collection.map((d) => (
|
|
<Link
|
|
href={`/design/${d}`}
|
|
key={d}
|
|
className={`btn w-64 btn-secondary flex flex-col flex-nowrap items-start
|
|
gap-2 py-2 h-auto border border-secondary justify-start text-left bg-opacity-30
|
|
hover:bg-opacity-20 hover:bg-secondary btn-ghost
|
|
border border-secondary hover:border hover:border-secondary
|
|
`}
|
|
>
|
|
<div className="text-lg font-bold">{t(`sde:${d}.t`)}</div>
|
|
<div className={`normal-case text-base-content`}>{t(`sde:${d}.d`)}</div>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</ModalWrapper>
|
|
)
|
|
}
|