victoria_seguros/src/components/NavBarComponents.tsx

import type { NavbarProps } from "@heroui/navbar";
import {
  Navbar,
  NavbarBrand,
  NavbarContent,
  NavbarItem,
  NavbarMenu,
  NavbarMenuItem,
  NavbarMenuToggle,
} from "@heroui/navbar";

import React from "react";
// import { Link } from "@heroui/link";
import {
  Link,
  useMatch,
  useMatchRoute,
  useNavigate,
} from "@tanstack/react-router";
import { Button } from "@heroui/button";
import { cn } from "@heroui/theme";
import { Divider } from "@heroui/divider";
import ButtonCall from "./ButtonCall";
import { Chip } from "@heroui/chip";

// import {Icon} from "@iconify/react";

const menuItems = [
  {
    icon: "",
    text: "Decesos",
    link: "/seguros/decesos/",
  },
  {
    icon: "",
    text: "Salud",
    link: "/seguros/salud/",
  },
  {
    icon: "",
    text: "Hogar",
    link: "/seguros/hogar/",
  },
  {
    icon: "",
    text: "Mascotas",
    link: "/seguros/mascotas/",
  },
  {
    icon: "",
    text: "Vehículos",
    link: "/seguros/vehiculos/",
  },
  {
    icon: "",
    text: "Vida",
    link: "/seguros/vida/",
  },
];

const activeLinkProps = {
  style: { fontWeight: "bold" },
};

const navLinks = [
  { to: "/", label: "Inicio", className: "text-lg" },
  { to: "/seguros/decesos", label: "Decesos" },
  { to: "/seguros/hogar", label: "Hogar" },
  { to: "/seguros/salud", label: "Salud" },
  { to: "/seguros/mascotas", label: "Mascotas" },
  { to: "/seguros/vida", label: "Vida" },
  {
    to: "/seguros/vehiculos",
    label: "Vehículos",
    className: "data-[active='true']:font-medium",
  },
];

const BasicNavbar = React.forwardRef<HTMLElement, NavbarProps>(
  ({ classNames = {}, ...props }, ref) => {
    const navigate = useNavigate();
    const [isMenuOpen, setIsMenuOpen] = React.useState(false);
    const delayedSetIsMenuOpen = (val: boolean) => {
      setTimeout(() => {
        setIsMenuOpen(val);
      }, 200);
    };

    return (
      <Navbar
        ref={ref}
        {...props}
        classNames={{
          base: cn("border-default-100 bg-transparent", {
            "bg-white/50": isMenuOpen,
          }),
          wrapper: "w-full justify-center",
          item: "hidden md:flex",
          ...classNames,
        }}
        height="60px"
        isMenuOpen={isMenuOpen}
        onMenuOpenChange={setIsMenuOpen}
      >
        {/* Left Content */}
        <NavbarBrand>
          <Button
            onPress={() =>
              navigate({
                to: "/",
                viewTransition: true,
              })
            }
            className="mx-0 px-0"
            variant="light"
          >
            <span className="text-lg font-medium text-purple-900">
              Victoria<span className="text-gray-500">Seguros</span>
            </span>
          </Button>
        </NavbarBrand>

        {/* Center Content */}
        <NavbarContent>
          {navLinks.map(({ to, label, className }) => (
            <Link key={to} to={to} viewTransition activeProps={activeLinkProps}>
              {() => (
                <NavbarItem className={` text-lg ${className}`}>
                  {label}
                </NavbarItem>
              )}
            </Link>
          ))}

          <NavbarItem>
            <Chip
              color="success"
              variant="flat"
              className=""
              startContent={
                <span className="iconify size-5 text-default-500 solar--phone-calling-rounded-bold-duotone" />
              }
              classNames={{
                content: "mx-1 items-center font-semibold",
              }}
            >
              <a href="tel:+34633620767">633620767</a>
            </Chip>
          </NavbarItem>
        </NavbarContent>
        <NavbarContent />
        <NavbarMenuToggle className="text-default-400 md:hidden" />
        <NavbarMenu
          // className="top-[calc(var(--navbar-height)_-_1px)] max-h-fit bg-default-200/50 shadow-medium backdrop-saturate-150 dark:bg-default-100/50"
          motionProps={{
            initial: { opacity: 0, y: -20 },
            animate: { opacity: 1, y: 0 },
            exit: { opacity: 0, y: -20 },
            transition: {
              ease: "easeInOut",
              duration: 0.2,
            },
          }}
        >
          <NavbarMenuItem className="">
            <Button
              className="mt-6"
              color="secondary"
              fullWidth
              onPress={() => {
                navigate({
                  to: "/formulario",
                  viewTransition: true,
                });
              }}
            >
              Calcular precio
            </Button>
          </NavbarMenuItem>
          <NavbarMenuItem>
            <div className="justify-center flex">
              <Chip
                color="success"
                variant="flat"
                startContent={
                  <span className="iconify size-5 text-default-500 solar--phone-calling-rounded-bold-duotone" />
                }
                classNames={{
                  content: "mx-1 items-center font-semibold",
                }}
              >
                <a href="tel:+34633620767" className="z-50">
                  633620767
                </a>
              </Chip>
            </div>
          </NavbarMenuItem>

          {menuItems.map((mi) => (
            <NavbarMenuItem
              key={mi.text}
              className="my-5 text-start font-black font-20 text-default-700 uppercase rounded-lg px-2"
            >
              <div className="flex gap-2 items-center ">
                <Link
                  to={mi.link}
                  viewTransition
                  className="w-full h-full"
                  onClick={() => delayedSetIsMenuOpen(false)}
                  activeProps={{
                    style: {
                      color: "#000",
                    },
                  }}
                >
                  {mi.text}
                </Link>
                <span className="iconify size-6 solar--alt-arrow-right-line-duotone text-secondary/80" />
              </div>
            </NavbarMenuItem>
          ))}
        </NavbarMenu>
      </Navbar>
    );
  }
);

BasicNavbar.displayName = "BasicNavbar";

export default BasicNavbar;