AI가 어려워하는 문제 2 #

import { Nav } from "@/interfaces/nav";
import Link from "next/link";

export default function DesktopNavbarMenu({ navData }: { navData: Nav }) {
  return (
    <div className="hidden md:visible md:block h-full">
      <ul className="h-full flex">
        {navData.children?.map((item) => (
          <li
            key={item.path}
            className="px-2 h-full flex items-center group cursor-pointer"
          >
            <p className="text-base">{item.name}</p>
            <div className="absolute left-0 top-[3rem] bg-white/80 backdrop-blur-2xl backdrop-saturate-200 w-full group-hover:grid group-hover:visible hidden grid-col-[30px]">
              <div className="max-w-[80rem] w-full max-h-[calc(100dvh-3rem)] m-auto px-4 py-16 overflow-x-auto">
                {renderDesktopNavbarMenu(item)}
              </div>
            </div>
          </li>
        ))}
      </ul>
    </div>
  );
}

function renderDesktopNavbarMenu(nav: Nav) {
  return (
    <div className="text-center flex flex-row gap-8 justify-center">
      {(nav.children ?? []).filter((children) => children.type === "item")
        .length > 0 && (
        <ul className="flex flex-col">
          {(nav.children ?? [])
            .filter((children) => children.type === "item")
            .map((children) => (
              <li key={children.path} className="">
                <Link href={children.path} className="bold p-1 cursor-pointer">
                  {children.name}
                </Link>
              </li>
            ))}
        </ul>
      )}
      {(nav.children ?? []).filter((children) => children.type === "category")
        .length > 0 && (
        <ul>
          {(nav.children ?? [])
            .filter((children) => children.type === "category")
            .map((children) => (
              <li key={children.path} className="">
                <p className="mb-4 text-base">{children.name}</p>
                {renderDesktopNavbarMenu(children)}
              </li>
            ))}
        </ul>
      )}
    </div>
  );
}