Header 8

"use client"

import Link from "next/link"

import { DesktopNav } from "@/components/header-8/desktop-nav"
import { MobileNav } from "@/components/header-8/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 w-xs rounded-3xl bg-card px-2 shadow-elevated-sm lg:w-fit"
      data-slot="header"
    >
      <div className="relative">
        <div className="flex h-14 items-center justify-between gap-2">
          <FancyButton size="icon-lg" render={<Link href="#" role="link" />}>
            <Icons.Logo aria-hidden="true" className="size-5" />
            <span className="sr-only">diarmuradi</span>
          </FancyButton>

          <div className="flex justify-center max-lg:hidden lg:flex-1">
            <DesktopNav />
          </div>

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