Header Simple

import Link from "next/link";

import { Button } from "@/components/ui/button";

const links = ["Product", "Docs", "Pricing", "Blog"];


function BrandMark({ className }: { className?: string }) {
  return (
    <svg
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth={2}
      strokeLinecap="round"
      strokeLinejoin="round"
      aria-hidden
      className={className}
    >
      <path d="M10 22V7a1 1 0 0 0-1-1H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-5a1 1 0 0 0-1-1H2" />
      <rect x="14.5" y="2.5" width="7" height="7" rx="1" transform="rotate(-8 18 6)" />
    </svg>
  );
}

export default function HeaderSimple() {
  return (
    <header className="border-b border-border/60 bg-background/80 backdrop-blur-md">
      <div className="mx-auto flex h-14 w-full max-w-6xl items-center gap-6 px-6">
        <Link href="#" className="flex items-center gap-2 font-semibold">
          <BrandMark className="size-5" />
          Blockforge
        </Link>
        <nav className="hidden items-center gap-1 md:flex">
          {links.map((label) => (
            <Link
              key={label}
              href="#"
              className="rounded-md px-3 py-1.5 text-sm text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
            >
              {label}
            </Link>
          ))}
        </nav>
        <div className="ml-auto flex items-center gap-2">
          <Button variant="ghost" size="sm" render={<Link href="#" />}>
            Sign in
          </Button>
          <Button size="sm" render={<Link href="#" />}>
            Get started
          </Button>
        </div>
      </div>
    </header>
  );
}