Header

import Logo from "@/mynaui/Logo";
import { buttonVariants } from "@/components/ui/button";
import { Menu } from "@mynaui/icons-react";

export default function Basic() {
  return (
    <header className="w-full border-b bg-background">
      <div className="mx-auto flex max-w-7xl items-center justify-between p-4">
        <Logo />
        <div className="flex items-center gap-1">
          <div className="hidden items-center text-muted-foreground md:inline-flex">
            <a
              href="#"
              className={buttonVariants({ variant: "ghost", size: "sm" })}
            >
              Features
            </a>
            <a
              href="#"
              className={buttonVariants({ variant: "ghost", size: "sm" })}
            >
              Pricing
            </a>
            <a
              href="#"
              className={buttonVariants({ variant: "ghost", size: "sm" })}
            >
              Blog
            </a>
            <a
              href="#"
              className={buttonVariants({ variant: "ghost", size: "sm" })}
            >
              Company
            </a>
            <p
              aria-hidden="true"
              className="hidden select-none text-border sm:block"
            >
              |
            </p>
            <a
              href="#"
              className={buttonVariants({ variant: "ghost", size: "sm" })}
            >
              Sign in
            </a>
          </div>
          <a href="#" className={buttonVariants({ size: "sm" })}>
            Get Started
          </a>
          <button className="inline-flex p-1.5 md:hidden">
            <Menu />
            <span className="sr-only">Open Menu</span>
          </button>
        </div>
      </div>
    </header>
  );
}

import Logo from "@/mynaui/Logo";
import { buttonVariants } from "@/components/ui/button";
import { cn } from "@/lib/utils";
import { Menu } from "@mynaui/icons-react";

export default function CenteredPill() {
  return (
    <header className="p-4">
      <div className="mx-auto flex max-w-2xl items-center justify-between space-x-4 rounded-full border bg-background p-1.5 pl-4">
        <Logo />
        <div className="hidden md:inline-flex">
          <a
            href="#"
            className={buttonVariants({ variant: "ghost", size: "sm" })}
          >
            Features
          </a>
          <a
            href="#"
            className={buttonVariants({ variant: "ghost", size: "sm" })}
          >
            Pricing
          </a>
          <a
            href="#"
            className={buttonVariants({ variant: "ghost", size: "sm" })}
          >
            Blog
          </a>
          <a
            href="#"
            className={buttonVariants({ variant: "ghost", size: "sm" })}
          >
            Company
          </a>
          <a
            href="#"
            className={buttonVariants({ variant: "ghost", size: "sm" })}
          >
            Sign in
          </a>
        </div>
        <div className="hidden md:inline-flex">
          <a
            href="#"
            className={cn(buttonVariants({ size: "sm" }), "rounded-full")}
          >
            Get Started
          </a>
        </div>
        <button className="inline-flex px-2 py-1.5 md:hidden">
          <Menu />
          <span className="sr-only">Open Menu</span>
        </button>
      </div>
    </header>
  );
}

import Logo from "@/mynaui/Logo";
import {
  BrandDribbble,
  BrandGithub,
  BrandInstagram,
  BrandThreads,
} from "@mynaui/icons-react";

export default function SimpleWithSocialLinks() {
  return (
    <header className="w-full border-b bg-background">
      <div className="mx-auto flex max-w-7xl items-center justify-between p-4">
        <Logo />
        <div className="flex items-center gap-2 text-blue-600 md:gap-3">
          <a href="#" target="_blank" rel="noreferrer noopener">
            <BrandDribbble className="size-5" />
          </a>
          <a href="#" target="_blank" rel="noreferrer noopener">
            <BrandGithub className="size-5" />
          </a>
          <a href="#" target="_blank" rel="noreferrer noopener">
            <BrandInstagram className="size-5" />
          </a>
          <a href="#" target="_blank" rel="noreferrer noopener">
            <BrandThreads className="size-5" />
          </a>
        </div>
      </div>
    </header>
  );
}

import Logo from "@/mynaui/Logo";
import { buttonVariants } from "@/components/ui/button";
import { Menu } from "@mynaui/icons-react";

export default function LeftLinks() {
  return (
    <header className="w-full border-b bg-background">
      <div className="mx-auto flex max-w-7xl items-center justify-between p-4">
        <div className="flex items-center gap-6">
          <Logo />
          <div className="hidden md:inline-flex">
            <a
              href="#"
              className={buttonVariants({ variant: "ghost", size: "sm" })}
            >
              Features
            </a>
            <a
              href="#"
              className={buttonVariants({ variant: "ghost", size: "sm" })}
            >
              Pricing
            </a>
            <a
              href="#"
              className={buttonVariants({ variant: "ghost", size: "sm" })}
            >
              Blog
            </a>
            <a
              href="#"
              className={buttonVariants({ variant: "ghost", size: "sm" })}
            >
              Company
            </a>
          </div>
        </div>
        <div className="hidden items-center gap-2 md:flex">
          <a
            href="#"
            className={buttonVariants({ variant: "outline", size: "sm" })}
          >
            Sign in
          </a>
          <a href="#" className={buttonVariants({ size: "sm" })}>
            Get Started
          </a>
        </div>
        <button className="inline-flex p-1.5 md:hidden">
          <Menu />
          <span className="sr-only">Open Menu</span>
        </button>
      </div>
    </header>
  );
}

import Logo from "@/mynaui/Logo";
import { buttonVariants } from "@/components/ui/button";
import { Menu } from "@mynaui/icons-react";

export default function CenterLinks() {
  return (
    <header className="w-full border-b bg-background">
      <div className="mx-auto flex max-w-7xl items-center justify-between p-4">
        <Logo />
        <div className="hidden md:inline-flex">
          <a
            href="#"
            className={buttonVariants({ variant: "ghost", size: "sm" })}
          >
            Features
          </a>
          <a
            href="#"
            className={buttonVariants({ variant: "ghost", size: "sm" })}
          >
            Pricing
          </a>
          <a
            href="#"
            className={buttonVariants({ variant: "ghost", size: "sm" })}
          >
            Blog
          </a>
          <a
            href="#"
            className={buttonVariants({ variant: "ghost", size: "sm" })}
          >
            Company
          </a>
        </div>
        <div className="hidden items-center gap-1 md:flex">
          <a
            href="#"
            className={buttonVariants({ variant: "ghost", size: "sm" })}
          >
            Sign in
          </a>
          <a href="#" className={buttonVariants({ size: "sm" })}>
            Get Started
          </a>
        </div>
        <button className="inline-flex p-1.5 md:hidden">
          <Menu />
          <span className="sr-only">Open Menu</span>
        </button>
      </div>
    </header>
  );
}