import * as React from "react";
import { cn } from "@/lib/utils";

export function Navbar({ className, ...p }: React.HTMLAttributes<HTMLElement>) {
  return (
    <header className={cn("sticky top-0 z-40 px-4 pt-4", className)} {...p} />
  );
}
export function NavbarInner({ className, ...p }: React.HTMLAttributes<HTMLDivElement>) {
  return (
    <div
      className={cn(
        "mx-auto flex h-16 max-w-[1400px] items-center gap-4 rounded-full bg-surface/85 px-3 pl-5 shadow-clay-sm backdrop-blur-md",
        className
      )}
      {...p}
    />
  );
}
export function NavbarBrand({ className, ...p }: React.HTMLAttributes<HTMLDivElement>) {
  return <div className={cn("flex items-center gap-2 text-lg font-extrabold tracking-tight", className)} {...p} />;
}
export function NavbarLinks({ className, ...p }: React.HTMLAttributes<HTMLElement>) {
  return <nav className={cn("hidden items-center gap-1 md:flex", className)} {...p} />;
}
export function NavbarLink({
  className,
  active,
  ...p
}: React.AnchorHTMLAttributes<HTMLAnchorElement> & { active?: boolean }) {
  return (
    <a
      data-active={active || undefined}
      className={cn(
        "flex items-center gap-1.5 rounded-full px-4 py-2 text-sm font-bold [&_svg]:size-[1.15em] text-on-surface-muted transition-colors hover:bg-surface-sunken hover:text-on-surface data-[active]:bg-surface-sunken data-[active]:text-on-surface",
        className
      )}
      {...p}
    />
  );
}
export function NavbarActions({ className, ...p }: React.HTMLAttributes<HTMLDivElement>) {
  return <div className={cn("ml-auto flex items-center gap-2", className)} {...p} />;
}
Installation
