59 lines
2.1 KiB
TypeScript
59 lines
2.1 KiB
TypeScript
'use client'
|
||
|
||
import {Category} from '@prisma/client'
|
||
import {useLocale} from 'next-intl'
|
||
|
||
import {Link} from '@/i18n/routing'
|
||
import {Button} from '@/ui/button'
|
||
|
||
export default function AppCatalogRender(data: {items: Category[]}) {
|
||
const locale = useLocale()
|
||
|
||
return (
|
||
<div className='flex w-full justify-center'>
|
||
<div className='bw-dd-menu group inline-block w-full'>
|
||
<Link href='/catalog'>
|
||
<Button className='py-13 flex h-10 w-full items-center rounded-sm border-none bg-brand-yellow-300 px-3 outline-none focus:outline-none'>
|
||
<span className='flex-1 pr-1 font-semibold'>Каталог</span>
|
||
<span>
|
||
<svg
|
||
className='h-4 w-4 transform fill-current transition duration-300 ease-in-out group-hover:-rotate-180'
|
||
xmlns='http://www.w3.org/2000/svg'
|
||
viewBox='0 0 20 20'
|
||
>
|
||
<path d='M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z' />
|
||
</svg>
|
||
</span>
|
||
</Button>
|
||
</Link>
|
||
<ul className='-bw-app-catalog-collapse mt-2 w-full min-w-32 origin-top transform rounded-sm border bg-white shadow-xl transition duration-300 ease-in-out group-hover:scale-100 hover:shadow-2xl'>
|
||
{data?.items.map((item: any) => (
|
||
<li
|
||
className='cursor-pointer rounded-none py-2.5 pl-3 pr-1.5 text-sm font-medium hover:bg-[#442d88]/10 xl:py-3'
|
||
key={item.id}
|
||
>
|
||
<button className='flex w-full items-center text-left outline-none focus:outline-none'>
|
||
<Link
|
||
className='flex-1 pr-1 leading-none xl:leading-[1.3]'
|
||
href={`/category/${item.locales[locale === 'uk' ? 0 : 1].slug}`}
|
||
>
|
||
{item.locales[locale === 'uk' ? 0 : 1].title}
|
||
</Link>
|
||
<span className='mr-auto'>
|
||
<svg
|
||
className='h-4 w-4 fill-current transition duration-150 ease-in-out'
|
||
xmlns='http://www.w3.org/2000/svg'
|
||
viewBox='0 0 20 20'
|
||
>
|
||
<path d='M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z' />
|
||
</svg>
|
||
</span>
|
||
</button>
|
||
</li>
|
||
))}
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|