Navbars

"use client";

import { ArrowRight, Menu as MenuIcon } from "lucide-react";
import * as React from "react";

import { Button, Sheet, SheetContent, SheetTitle, SheetTrigger, WaveinnoLogo, cn } from "@waveinno/ui";

const LINKS = ["Product", "Solutions", "Pricing", "Customers", "Docs"];

export default function NavbarSimple() {
  const [active, setActive] = React.useState("Product");
  const [open, setOpen] = React.useState(false);
  return (
    <header className="sticky top-0 z-30 border-b border-border bg-canvas/80 backdrop-blur-xl backdrop-saturate-150">
      <div className="mx-auto flex h-16 max-w-6xl items-center gap-6 px-4 sm:px-6">
        <a href="#" aria-label="Home" className="shrink-0">
          <WaveinnoLogo className="h-5" />
        </a>
        <nav aria-label="Main" className="hidden flex-1 items-center gap-1 md:flex">
          {LINKS.map((l) => (
            <a
              key={l}
              href="#"
              onClick={(e) => (e.preventDefault(), setActive(l))}
              className={cn(
                "relative rounded-full px-3 py-1.5 text-[13.5px] font-medium transition-colors",
                active === l ? "text-text" : "text-muted hover:bg-hover hover:text-text",
              )}
            >
              {l}
              {active === l ? <span className="absolute inset-x-3 -bottom-[17px] h-0.5 rounded-full bg-[linear-gradient(90deg,var(--brand-1),var(--brand-2))]" /> : null}
            </a>
          ))}
        </nav>
        <div className="ml-auto hidden items-center gap-2 md:flex">
          <Button variant="ghost">Sign in</Button>
          <Button variant="primary" shape="pill">
            Start free <ArrowRight />
          </Button>
        </div>
        <Sheet open={open} onOpenChange={setOpen}>
          <SheetTrigger asChild>
            <button type="button" aria-label="Open menu" className="ml-auto grid size-10 cursor-pointer place-items-center rounded-full border border-border text-body md:hidden">
              <MenuIcon className="size-[18px]" />
            </button>
          </SheetTrigger>
          <SheetContent side="right" className="w-[300px] p-5">
            <SheetTitle className="sr-only">Menu</SheetTitle>
            <WaveinnoLogo className="mb-6 h-5" />
            <nav aria-label="Main" className="flex flex-col gap-1">
              {LINKS.map((l) => (
                <a key={l} href="#" onClick={() => setOpen(false)} className="rounded-[10px] px-3 py-2.5 text-[15px] font-medium text-text hover:bg-hover">
                  {l}
                </a>
              ))}
            </nav>
            <div className="mt-6 grid gap-2">
              <Button variant="secondary">Sign in</Button>
              <Button variant="primary">Start free</Button>
            </div>
          </SheetContent>
        </Sheet>
      </div>
    </header>
  );
}

"use client";

import { Menu as MenuIcon, Search } from "lucide-react";
import * as React from "react";

import { Button, Kbd, Sheet, SheetContent, SheetTitle, SheetTrigger, WaveinnoLogo, cn } from "@waveinno/ui";

const LEFT = ["Product", "Solutions", "Pricing"];
const RIGHT = ["Customers", "Docs"];

export default function NavbarCentered() {
  const [active, setActive] = React.useState("Product");
  const [open, setOpen] = React.useState(false);
  const link = (l: string) => (
    <a
      key={l}
      href="#"
      onClick={(e) => (e.preventDefault(), setActive(l))}
      aria-current={active === l ? "page" : undefined}
      className={cn("rounded-full px-3 py-1.5 text-[13.5px] font-medium transition-colors", active === l ? "bg-hover text-text" : "text-muted hover:text-text")}
    >
      {l}
    </a>
  );
  return (
    <header className="border-b border-border bg-canvas">
      <div className="mx-auto grid h-16 max-w-6xl grid-cols-[1fr_auto_1fr] items-center gap-4 px-4 sm:px-6">
        <nav aria-label="Main" className="hidden items-center gap-1 md:flex">
          {LEFT.map(link)}
        </nav>
        <Sheet open={open} onOpenChange={setOpen}>
          <SheetTrigger asChild>
            <button type="button" aria-label="Open menu" className="grid size-10 cursor-pointer place-items-center rounded-full border border-border text-body md:hidden">
              <MenuIcon className="size-[18px]" />
            </button>
          </SheetTrigger>
          <SheetContent side="left" className="w-[300px] p-5">
            <SheetTitle className="sr-only">Menu</SheetTitle>
            <WaveinnoLogo className="mb-6 h-5" />
            <nav aria-label="Main" className="flex flex-col gap-1">
              {[...LEFT, ...RIGHT].map((l) => (
                <a key={l} href="#" onClick={() => setOpen(false)} className="rounded-[10px] px-3 py-2.5 text-[15px] font-medium text-text hover:bg-hover">
                  {l}
                </a>
              ))}
            </nav>
            <Button variant="primary" className="mt-6 w-full">
              Sign in
            </Button>
          </SheetContent>
        </Sheet>
        <a href="#" aria-label="Home" className="justify-self-center">
          <WaveinnoLogo className="h-5" />
        </a>
        <div className="flex items-center justify-end gap-1">
          <nav aria-label="More" className="hidden items-center gap-1 lg:flex">
            {RIGHT.map(link)}
          </nav>
          <button
            type="button"
            className="ml-1 hidden h-9 cursor-pointer items-center gap-2 rounded-full border border-border bg-surface pl-3 pr-1.5 text-[13px] text-muted transition-colors hover:text-text sm:inline-flex"
          >
            <Search className="size-4" /> Search <Kbd keys={["⌘", "K"]} size="sm" />
          </button>
          <Button variant="dark" size="sm" shape="pill" className="ml-1 hidden sm:inline-flex">
            Sign in
          </Button>
        </div>
      </div>
    </header>
  );
}