Header Menu Items

1import Link from "next/link";
2import type { HeaderMenuItemsBlock } from "~/payload-types";
3import { cn } from "@/registry/default/utils";
4 
5export default function MenuItems({
6	mobileView = false,
7	menuItems,
8}: { mobileView?: boolean } & HeaderMenuItemsBlock) {
9	return (
10		<div className={cn("hidden lg:block", mobileView === true && "block")}>
11			<ul
12				className={cn(
13					"flex gap-8 text-sm",
14					mobileView === true && "flex-col gap-4 text-center",
15				)}
16			>
17				{menuItems.map((item, index) => (
18					<li key={index}>
19						<Link
20							href={item.href}
21							className="text-muted-foreground hover:text-primary block duration-300"
22						>
23							<span>{item.label}</span>
24						</Link>
25					</li>
26				))}
27			</ul>
28		</div>
29	);
30}