Navbar

import { Navbar, NavbarBrand, NavbarContent, NavbarItem, NavbarActions } from "@/components/ui/navbar";

export default function Example() {
  return <Navbar />;
}

"use client";

import { forwardRef } from "react";
import { cn } from "@/lib/utils";

const Navbar = forwardRef(({ className, children, ...props }, ref) => (
  <nav ref={ref} className={cn("flex h-16 items-center justify-between border-b bg-background px-4 sm:px-6 lg:px-8", className)} {...props}>
    {children}
  </nav>
));
Navbar.displayName = "Navbar";

const NavbarBrand = forwardRef(({ className, ...props }, ref) => (
  <div ref={ref} className={cn("flex items-center gap-2 text-lg font-bold", className)} {...props} />
));
NavbarBrand.displayName = "NavbarBrand";

const NavbarContent = forwardRef(({ className, ...props }, ref) => (
  <div ref={ref} className={cn("hidden items-center gap-6 md:flex", className)} {...props} />
));
NavbarContent.displayName = "NavbarContent";

const NavbarItem = forwardRef(({ className, active, ...props }, ref) => (
  <a ref={ref} className={cn("text-sm font-medium text-muted-foreground transition-colors hover:text-foreground", active && "text-foreground", className)} {...props} />
));
NavbarItem.displayName = "NavbarItem";

const NavbarActions = forwardRef(({ className, ...props }, ref) => (
  <div ref={ref} className={cn("flex items-center gap-2", className)} {...props} />
));
NavbarActions.displayName = "NavbarActions";

export { Navbar, NavbarBrand, NavbarContent, NavbarItem, NavbarActions };