Navbar

import { Button } from "@/registry/ds/button";
import { BookOpen, Calendar, FileText, Search, Users } from "@/registry/ds/icons";
import { Navbar, NavbarActions, NavbarBrand, NavbarLink, NavbarMenu, NavbarMenuLink, NavbarMobile, NavbarMobileGroup, NavbarMobileLink, NavbarNav } from "@/registry/ds/navbar";

const Logo = () => (
  <svg viewBox="0 0 24 24" aria-hidden>
    <rect width="24" height="24" rx="6" fill="var(--primary)" />
    <path d="M7 12.5l3.5 3.5L17 9" stroke="var(--primary-fg)" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" fill="none" />
  </svg>
);

export default function NavbarBasic() {
  return (
    <div className="w-full overflow-hidden rounded-lg">
      <Navbar position="static" collapse="sm">
        <NavbarBrand href="#">
          <Logo />
          Campus
        </NavbarBrand>
        <NavbarNav>
          <NavbarLink href="#" active>
            Inicio
          </NavbarLink>
          <NavbarMenu label="Académico" columns={2}>
            <NavbarMenuLink href="#" icon={<BookOpen />} label="Materias" description="Plan de estudios y correlativas" />
            <NavbarMenuLink href="#" icon={<Calendar />} label="Calendario" description="Cursada, finales y feriados" />
            <NavbarMenuLink href="#" icon={<Users />} label="Docentes" description="Cátedras y horarios de consulta" />
            <NavbarMenuLink href="#" icon={<FileText />} label="Certificados" description="Regular, analítico y título" />
          </NavbarMenu>
          <NavbarLink href="#">Biblioteca</NavbarLink>
          <NavbarLink href="#">Ayuda</NavbarLink>
        </NavbarNav>
        <NavbarActions>
          <Button variant="stroke" size="sm" iconOnly={<Search />} aria-label="Buscar" />
          <Button size="sm">Ingresar</Button>
          <NavbarMobile>
            <NavbarMobileLink href="#" active>
              Inicio
            </NavbarMobileLink>
            <NavbarMobileGroup label="Académico">
              <NavbarMobileLink href="#" icon={<BookOpen />}>
                Materias
              </NavbarMobileLink>
              <NavbarMobileLink href="#" icon={<Calendar />}>
                Calendario
              </NavbarMobileLink>
              <NavbarMobileLink href="#" icon={<Users />}>
                Docentes
              </NavbarMobileLink>
              <NavbarMobileLink href="#" icon={<FileText />}>
                Certificados
              </NavbarMobileLink>
            </NavbarMobileGroup>
            <NavbarMobileGroup label="Más">
              <NavbarMobileLink href="#">Biblioteca</NavbarMobileLink>
              <NavbarMobileLink href="#">Ayuda</NavbarMobileLink>
            </NavbarMobileGroup>
          </NavbarMobile>
        </NavbarActions>
      </Navbar>
    </div>
  );
}