Header 7

"use client"

import Link from "next/link"

import { DesktopNav } from "@/components/header-7/desktop-nav"
import { MobileNav } from "@/components/header-7/mobile-nav"
import { FancyButton } from "@/components/ui/fancy-button"
import { Icons } from "@/components/ui/icons"

export function SiteHeader() {
  return (
    <header
      className="sticky top-0 z-50 flex w-full justify-center px-4"
      data-slot="header"
    >
      <div className="relative w-full max-w-xl">
        <div className="grid h-14 grid-cols-[1fr_auto_1fr] items-center gap-2">
          <FancyButton
            size="icon-lg"
            className="justify-self-start"
            render={<Link href="#" role="link" />}
          >
            <Icons.Logo aria-hidden="true" className="size-5" />
            <span className="sr-only">diarmuradi</span>
          </FancyButton>

          <DesktopNav />

          <div className="col-start-3 flex items-center justify-end gap-2">
            <FancyButton
              size="lg"
              className="max-md:hidden"
              render={<Link href="#sign-up" role="link" />}
            >
              Sign up
            </FancyButton>
            <MobileNav />
          </div>
        </div>
      </div>
    </header>
  )
}