Navbar Menu

1"use client";
2 
3import { AnimatePresence, motion } from "motion/react";
4import Image from "next/image";
5import * as React from "react";
6import { ArrowDown01Icon, HugeiconsIcon } from "@/components/icons";
7 
8import { cn } from "@/lib/utils";
9import { RaisedButton } from "@/registry/new-york/ui/raised-button";
10 
11export interface NavbarMenuLink {
12  label: string;
13  href: string;
14  icon?: React.ReactNode;
15  external?: boolean;
16  description?: string;
17  backgroundImage?: string;
18  rowSpan?: number;
19}
20 
21export interface NavbarMenuSection {
22  id: string;
23  links: NavbarMenuLink[];
24  gridLayout?: string;
25}
26 
27export interface NavbarMenuProps {
28  activeMenu: string;
29  sections: NavbarMenuSection[];
30  onClose?: () => void;
31}
32 
33export interface NavbarWithMenuProps {
34  sections: NavbarMenuSection[];
35  navItems?: Array<
36    | { type: "link"; label: string; href: string }
37    | { type: "dropdown"; label: string; menu: string }
38  >;
39  logo?: React.ReactNode;
40  cta?: React.ReactNode;
41}
42 
43const ListItem = React.forwardRef<
44  HTMLAnchorElement,
45  React.AnchorHTMLAttributes<HTMLAnchorElement> & {
46    title: string;
47    children?: React.ReactNode;
48    href: string;
49    external?: boolean;
50    icon?: React.ReactNode;
51    backgroundImage?: string;
52    rowSpan?: number;
53  }
54>(
55  (
56    {
57      className,
58      title,
59      children,
60      href,
61      external,
62      icon,
63      backgroundImage,
64      rowSpan,
65      ...props
66    },
67    ref,
68  ) => {
69    return (
70      <li className={cn("list-none", rowSpan === 2 && "row-span-2")}>
71        <a
72          ref={ref}
73          href={href}
74          target={external ? "_blank" : undefined}
75          rel={external ? "noopener noreferrer" : undefined}
76          className={cn(
77            "group relative flex h-full min-h-18 w-full flex-col justify-center overflow-hidden rounded-2xl bg-zinc-800/0 p-3.5 leading-none no-underline outline-none transition-all duration-150 select-none hover:bg-zinc-800 hover:text-zinc-100 focus:bg-zinc-800 focus:text-zinc-100",
78            className,
79          )}
80          {...props}
81        >
82          {backgroundImage && (
83            <>
84              <Image
85                fill
86                src={backgroundImage}
87                alt={title}
88                className="absolute inset-0 z-0 h-full w-full object-cover transition-all group-hover:brightness-60"
89              />
90              <div className="absolute inset-0 z-[1] bg-gradient-to-t from-black/90 via-black/50 to-black/20" />
91            </>
92          )}
93// … truncated