49 lines
1.7 KiB
JavaScript
49 lines
1.7 KiB
JavaScript
import React from 'react'
|
|
import DesignIcon from 'shared/components/icons/design.js'
|
|
import Link from 'next/link'
|
|
import { useTranslation } from 'next-i18next'
|
|
import useVersion from 'site/hooks/useVersion.js'
|
|
import { formatVersionUri } from './version-picker.js'
|
|
|
|
const PatternPicker = ({ app }) => {
|
|
const { t } = useTranslation(['common'])
|
|
const version = useVersion()
|
|
|
|
return (
|
|
<div className="dropdown w-full md:w-auto">
|
|
<div tabIndex="0" className={`
|
|
m-0 btn btn-neutral flex flex-row gap-2 btn-outline
|
|
md:btn-ghost
|
|
hover:bg-neutral hover:border-neutral-content
|
|
`}>
|
|
<DesignIcon />
|
|
<span>{t('designs')}</span>
|
|
</div>
|
|
<ul tabIndex="0" className="p-2 shadow menu dropdown-content bg-base-100 rounded-box w-52 overflow-y-scroll navdrop">
|
|
{Object.keys(app.patterns).map(section => (
|
|
<React.Fragment key={section}>
|
|
<li className={`
|
|
capitalize font-bold text-base-content text-center
|
|
opacity-50 border-b2 my-2 border-base-content
|
|
`}>
|
|
{t(app.navigation[section].__title)}
|
|
</li>
|
|
{app.patterns[section].map(pattern => (
|
|
<li key={pattern}>
|
|
<Link href={formatVersionUri(version, pattern)}>
|
|
<button className="btn btn-ghost">
|
|
<span className="text-base-content">
|
|
{pattern}
|
|
</span>
|
|
</button>
|
|
</Link>
|
|
</li>
|
|
))}
|
|
</React.Fragment>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default PatternPicker
|