'use client'; import clsx from 'clsx'; import { Menu } from 'lib/shopify/types'; import Link from 'next/link'; import { usePathname } from 'next/navigation'; import { useEffect, useState } from 'react'; const FooterMenuItem = ({ item }: { item: Menu }) => { const pathname = usePathname(); const [active, setActive] = useState(pathname === item.path); useEffect(() => { setActive(pathname === item.path); }, [pathname, item.path]); return ( <li className="mt-2 first:mt-1"> <Link href={item.path} className={clsx(' hover:text-black dark:hover:text-white', { 'text-black dark:text-white': active })} > {item.title} </Link> </li> ); }; export default async function FooterMenu({ menu }: { menu: Menu[] }) { if (!menu.length) return null; return ( <nav> <ul> {menu.map((item: Menu) => { return <FooterMenuItem key={item.title} item={item} />; })} </ul> </nav> ); }