45 lines
1.1 KiB
TypeScript
45 lines
1.1 KiB
TypeScript
"use client";
|
|
|
|
import React from "react";
|
|
import clsx from "clsx";
|
|
import Link from "next/link";
|
|
import { usePathname } from "next/navigation";
|
|
|
|
const links = [
|
|
{ name: "Appetizers", href: "/menu" },
|
|
{ name: "Brunch", href: "/menu/Brunch" },
|
|
{ name: "Lunch", href: "/menu/Lunch" },
|
|
{ name: "Dinner", href: "/menu/Dinner" },
|
|
{ name: "Beverages", href: "/menu/Beverages" },
|
|
{ name: "Bar", href: "/menu/Bar" },
|
|
];
|
|
|
|
const MenuLinks = () => {
|
|
const pathname = usePathname();
|
|
|
|
return (
|
|
<>
|
|
{links.map((link) => {
|
|
// const LinkIcon = link.icon;
|
|
return (
|
|
<Link
|
|
key={link.name}
|
|
href={link.href}
|
|
className={clsx(
|
|
"flex h-[48px] grow items-center justify-center gap-2 bg-transparent p-3 text-xl font-semibold hover:text-red-700 md:flex-none md:justify-start md:p-2 md:px-3",
|
|
{
|
|
"text-red-700": pathname === link.href,
|
|
}
|
|
)}
|
|
>
|
|
{/* <LinkIcon className="w-6" /> */}
|
|
<p className="hidden md:block">{link.name}</p>
|
|
</Link>
|
|
);
|
|
})}
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default MenuLinks;
|