32 lines
905 B
TypeScript

import { Link, useRouteLoaderData } from 'react-router'
import HeaderMenuMobile from '~/layouts/news/header-menu-mobile'
import type { loader } from '~/routes/_layout'
import { HeaderSearch } from './header-search'
export const HeaderMenu = () => {
const loaderData = useRouteLoaderData<typeof loader>('routes/_layout')
const menu = loaderData?.categoriesData
return (
<>
<div className="hidden h-[60px] items-center justify-between bg-[#2E2F7C] text-xl font-medium text-white sm:flex">
{menu?.map((item) => (
<Link
key={item.id}
to={`/category/${item.code}`}
className={
'flex h-full items-center justify-center border-r border-white px-[35px]'
}
>
{item.name}
</Link>
))}
<HeaderSearch />
</div>
<HeaderMenuMobile menu={menu} />
</>
)
}