Header 05

import { Header } from "@/registry/designali/blocks/header/header-05/components/header"

export default function Header05() {
  return (
    <div className="flex min-h-screen w-full flex-col">
      <Header />
      <main className="flex-1">
        <section className="flex h-screen items-center justify-center">
          <h1 className="text-4xl font-bold">Hero</h1>
        </section>

        <section className="flex h-screen items-center justify-center">
          <h1 className="text-4xl font-bold">Section</h1>
        </section>
      </main>
    </div>
  )
}

/* eslint-disable @next/next/no-img-element */

"use client"

import React from "react"

import { Equal, ShoppingBag } from "lucide-react"

import { Menus } from "@/registry/designali/blocks/header/header-05/components/menus"
import { PhoneMenu } from "@/registry/designali/blocks/header/header-05/components/phone-menus"
import { Search } from "@/registry/designali/blocks/header/header-05/components/search"

import {
  Sheet,
  SheetContent,
  SheetTrigger,
} from "@workspace/ui/components/sheet"

import { Logo } from "@workspace/ui/designali/logo"

const Header = () => {
  return (
    <header className="sticky top-0 flex h-12 w-full justify-center bg-foreground">
      <div className="flex w-full max-w-4xl justify-center gap-6">
        <div className="flex w-full items-center justify-between">
          {/* Logo */}
          <a
            href="#"
            aria-label="home"
            className="flex items-center gap-2 px-6 whitespace-nowrap"
          >
            <Logo className="size-8" />
          </a>

          {/* Desktop Menu */}
          <Menus />

          {/* Actions + Mobile Menu */}
          <Sheet>
            <div className="flex items-center gap-2 px-2">
              <Search />

              {/* Shopping Bag */}
              <button
                type="button"
                aria-label="Shopping bag"
                className="relative flex h-9 w-9 items-center justify-center text-background hover:text-background/80"
              >
                <ShoppingBag className="h-4 w-4" />
              </button>

              {/* Mobile Menu Trigger */}
              <SheetTrigger
                className="flex h-9 w-9 items-center justify-center text-background hover:text-background/80 lg:hidden"
                aria-label="Open menu"
              >
                <Equal className="h-5 w-5" />
              </SheetTrigger>
            </div>

            {/* Mobile Sheet */}
            <SheetContent side="right" className="">
              <PhoneMenu />
            </SheetContent>
          </Sheet>
        </div>
      </div>
    </header>
  )
}

export { Header }

"use client"

import * as React from "react"
import { useState } from "react"

import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuList,
  NavigationMenuTrigger,
} from "@/registry/designali/blocks/header/header-05/components/navigation"

export function Menus() {
  type MenuName =
    | "design"
    | "dev"
    | "learning"
    | "community"
    | "resources"
    | "tools"
    | "services"
    | "company"
    | null

  const [activeMenu, setActiveMenu] = useState<MenuName>(null)

  const handleMouseEnter = (menuName: MenuName) => setActiveMenu(menuName)
  const handleMouseLeave = () => setActiveMenu(null)

  return (
    <div className="hidden md:block">
      <NavigationMenu>
        <NavigationMenuList>
          {/* 1. Design */}
          <NavigationMenuItem
            onMouseEnter={() => handleMouseEnter("design")}
            onMouseLeave={handleMouseLeave}
          >
            <NavigationMenuTrigger isActive={activeMenu === "design"}>
              Design
            </NavigationMenuTrigger>
            <NavigationMenuContent isOpen={activeMenu === "design"}>
              <ul className="grid w-full grid-cols-1 gap-6 md:grid-cols-5">
                <li>
                  <a href="#" className="group block">
                    <div className="mb-3 text-xl font-semibold text-background/80 hover:text-background">
                      UI/UX
                    </div>
                  </a>
                  <a href="#" className="group block">
                    <div className="mb-3 text-xl font-semibold text-background/80 hover:text-background">
                      Branding
                    </div>
                  </a>
                  <a href="#" className="group block">
                    <div className="mb-3 text-xl font-semibold text-background/80 hover:text-background">
                      Prototypes
                    </div>
                  </a>
                </li>
              </ul>
            </NavigationMenuContent>
          </NavigationMenuItem>

          {/* 2. Development */}
          <NavigationMenuItem
            onMouseEnter={() => handleMouseEnter("dev")}
            onMouseLeave={handleMouseLeave}
          >
            <NavigationMenuTrigger isActive={activeMenu === "dev"}>
              Development
            </NavigationMenuTrigger>
            <NavigationMenuContent isOpen={activeMenu === "dev"}>
              <ul className="grid w-full grid-cols-1 gap-6 md:grid-cols-5">
                <li>
                  <a href="#" className="group block">
                    <div className="mb-3 text-xl font-semibold text-background/80 hover:text-background">
                      Frontend
                    </div>
                  </a>
                  <a href="#" className="group block">
                    <div className="mb-3 text-xl font-semibold text-background/80 hover:text-background">
                      Backend
                    </div>
                  </a>
                  <a href="#" className="group block">
                    <div className="mb-3 text-xl font-semibold text-background/80 hover:text-background">
                      DevOps
                    </div>
                  </a>
                </li>
              </ul>
            </NavigationMenuContent>
          </NavigationMenuItem>

          {/* 3. Learning */}
          <NavigationMenuItem
            onMouseEnter={() => handleMouseEnter("learning")}
            onMouseLeave={handleMouseLeave}
          >
            <NavigationMenuTrigger isActive={activeMenu === "learning"}>
              Learning
            </NavigationMenuTrigger>
            <NavigationMenuContent isOpen={activeMenu === "learning"}>
              <ul className="grid w-full grid-cols-1 gap-6 md:grid-cols-5">
                <li>
                  <a href="#" className="group block">
                    <div className="mb-3 text-xl font-semibold text-background/80 hover:text-background">
                      Tutorials
                    </div>
                  </a>
                  <a href="#" className="group block">
                    <div className="mb-3 text-xl font-semibold text-background/80 hover:text-background">
                      Courses
                    </div>
                  </a>
                  <a href="#" className="group block">
                    <div className="mb-3 text-xl font-semibold text-background/80 hover:text-background">
                      Blogs
                    </div>
                  </a>
                </li>
              </ul>
            </NavigationMenuContent>
          </NavigationMenuItem>

          {/* 4. Community */}
          <NavigationMenuItem
            onMouseEnter={() => handleMouseEnter("community")}
            onMouseLeave={handleMouseLeave}
          >
            <NavigationMenuTrigger isActive={activeMenu === "community"}>
              Community
            </NavigationMenuTrigger>
            <NavigationMenuContent isOpen={activeMenu === "community"}>
              <ul className="grid w-full grid-cols-1 gap-6 md:grid-cols-5">
                <li>
                  <a href="#" className="group block">
                    <div className="mb-3 text-xl font-semibold text-background/80 hover:text-background">
                      Forums
                    </div>
                  </a>
                  <a href="#" className="group block">
                    <div className="mb-3 text-xl font-semibold text-background/80 hover:text-background">
                      Discord
                    </div>
                  </a>
                  <a href="#" className="group block">
                    <div className="mb-3 text-xl font-semibold text-background/80 hover:text-background">
                      GitHub
                    </div>
                  </a>
                </li>
              </ul>
            </NavigationMenuContent>
          </NavigationMenuItem>

          {/* 5. Resources */}
          <NavigationMenuItem
            onMouseEnter={() => handleMouseEnter("resources")}
            onMouseLeave={handleMouseLeave}
          >
            <NavigationMenuTrigger isActive={activeMenu === "resources"}>
              Resources
            </NavigationMenuTrigger>
            <NavigationMenuContent isOpen={activeMenu === "resources"}>
              <ul className="grid w-full grid-cols-1 gap-6 md:grid-cols-5">
                <li>
                  <a href="#" className="group block">
                    <div className="mb-3 text-xl font-semibold text-background/80 hover:text-background">
                      Documentation
                    </div>
                  </a>
                  <a href="#" className="group block">
                    <div className="mb-3 text-xl font-semibold text-background/80 hover:text-background">
                      API Reference
                    </div>
                  </a>
                  <a href="#" className="group block">
                    <div className="mb-3 text-xl font-semibold text-background/80 hover:text-background">
                      Changelog
                    </div>
                  </a>
                </li>
              </ul>
            </NavigationMenuContent>
          </NavigationMenuItem>

          {/* 6. Tools */}
          <NavigationMenuItem
            onMouseEnter={() => handleMouseEnter("tools")}
            onMouseLeave={handleMouseLeave}
          >
            <NavigationMenuTrigger isActive={activeMenu === "tools"}>
              Tools
            </NavigationMenuTrigger>
            <NavigationMenuContent isOpen={activeMenu === "tools"}>
              <ul className="grid w-full grid-cols-1 gap-6 md:grid-cols-5">
                <li>
                  <a href="#" className="group block">
                    <div className="mb-3 text-xl font-semibold text-background/80 hover:text-background">
                      Figma
                    </div>
                  </a>
                  <a href="#" className="group block">
                    <div className="mb-3 text-xl font-semibold text-background/80 hover:text-background">
                      Sketch
                    </div>
                  </a>
                  <a href="#" className="group block">
                    <div className="mb-3 text-xl font-semibold text-background/80 hover:text-background">
                      Photoshop
                    </div>
                  </a>
                </li>
              </ul>
            </NavigationMenuContent>
          </NavigationMenuItem>

          <div className="hidden lg:flex">
            <NavigationMenuItem
              onMouseEnter={() => handleMouseEnter("services")}
              onMouseLeave={handleMouseLeave}
            >
              <NavigationMenuTrigger isActive={activeMenu === "services"}>
                Services
              </NavigationMenuTrigger>
              <NavigationMenuContent isOpen={activeMenu === "services"}>
                <ul className="grid w-full grid-cols-1 gap-6 md:grid-cols-5">
                  <li>
                    <a href="#" className="group block">
                      <div className="mb-3 text-xl font-semibold text-background/80 hover:text-background">
                        Consulting
                      </div>
                    </a>
                    <a href="#" className="group block">
                      <div className="mb-3 text-xl font-semibold text-background/80 hover:text-background">
                        Workshops
                      </div>
                    </a>
                    <a href="#" className="group block">
                      <div className="mb-3 text-xl font-semibold text-background/80 hover:text-background">
                        Support
                      </div>
                    </a>
                  </li>
                </ul>
              </NavigationMenuContent>
            </NavigationMenuItem>

            <NavigationMenuItem
              onMouseEnter={() => handleMouseEnter("company")}
              onMouseLeave={handleMouseLeave}
            >
              <NavigationMenuTrigger isActive={activeMenu === "company"}>
                Company
              </NavigationMenuTrigger>
              <NavigationMenuContent isOpen={activeMenu === "company"}>
                <ul className="grid w-full grid-cols-1 gap-6 md:grid-cols-5">
                  <li>
                    <a href="#" className="group block">
                      <div className="mb-3 text-xl font-semibold text-background/80 hover:text-background">
                        About Us
                      </div>
                    </a>
                    <a href="#" className="group block">
                      <div className="mb-3 text-xl font-semibold text-background/80 hover:text-background">
                        Careers
                      </div>
                    </a>
                    <a href="#" className="group block">
                      <div className="mb-3 text-xl font-semibold text-background/80 hover:text-background">
                        Contact
                      </div>
                    </a>
                  </li>
                </ul>
              </NavigationMenuContent>
            </NavigationMenuItem>
          </div>
        </NavigationMenuList>
      </NavigationMenu>
    </div>
  )
}

const PhoneMenu = () => {
  const mainNav = [
    {
      title: "Products",
      items: [
        { label: "New Arrivals", href: "#" },
        { label: "Best Sellers", href: "#" },
        { label: "Trending Now", href: "#" },
        { label: "Gift Ideas", href: "#" },
      ],
    },
    {
      title: "Services",
      items: [
        { label: "Consulting", href: "#" },
        { label: "Custom Solutions", href: "#" },
        { label: "Training & Support", href: "#" },
        { label: "Maintenance Plans", href: "#" },
      ],
    },
    {
      title: "Company",
      items: [
        { label: "About Us", href: "#" },
        { label: "Careers", href: "#" },
        { label: "Press", href: "#" },
        { label: "Partners", href: "#" },
      ],
    },
    {
      title: "Resources",
      items: [
        { label: "Blog", href: "#" },
        { label: "Guides & Tutorials", href: "#" },
        { label: "Webinars", href: "#" },
        { label: "Documentation", href: "#" },
      ],
    },
    {
      title: "Support",
      items: [
        { label: "Help Center", href: "#" },
        { label: "Contact Support", href: "#" },
        { label: "FAQ", href: "#" },
        { label: "Community Forums", href: "#" },
      ],
    },
    {
      title: "Legal",
      items: [
        { label: "Privacy Policy", href: "#" },
        { label: "Terms of Service", href: "#" },
        { label: "Cookie Policy", href: "#" },
      ],
    },
    {
      title: "Locations",
      items: [
        { label: "Find a Store", href: "#" },
        { label: "International Offices", href: "#" },
        { label: "Events", href: "#" },
      ],
    },
    {
      title: "Contact",
      items: [
        { label: "Email Us", href: "#" },
        { label: "Request a Call", href: "#" },
        { label: "Live Chat", href: "#" },
      ],
    },
    {
      title: "Community",
      items: [
        { label: "Forums", href: "#" },
        { label: "Ambassadors", href: "#" },
        { label: "User Stories", href: "#" },
      ],
    },
    {
      title: "Extras",
      items: [
        { label: "Gift Cards", href: "#" },
        { label: "Promotions", href: "#" },
        { label: "Newsletter", href: "#" },
      ],
    },
  ]

  return (
    <nav className="flex flex-col py-6">
      {mainNav.map((item) => (
        <div key={item.title} className="border-b border-white/10">
          <button className="w-full px-6 py-3 text-left text-sm text-white transition-colors hover:bg-white/5">
            {item.title}
          </button>
        </div>
      ))}
    </nav>
  )
}

export { PhoneMenu }

"use client"

import React, { ReactNode } from "react"

interface ChildrenProps {
  children: ReactNode
}

/* =========================
   Navigation Menu
========================= */

const NavigationMenu: React.FC<ChildrenProps> = ({ children }) => (
  <nav className="relative z-50 flex items-center justify-center">
    {children}
  </nav>
)

/* =========================
   Navigation Menu List
========================= */

const NavigationMenuList: React.FC<ChildrenProps> = ({ children }) => (
  <ul className="flex list-none items-center justify-center">{children}</ul>
)

/* =========================
   Navigation Menu Item
========================= */

interface NavigationMenuItemProps extends ChildrenProps {
  onMouseEnter?: () => void
  onMouseLeave?: () => void
}

const NavigationMenuItem: React.FC<NavigationMenuItemProps> = ({
  children,
  onMouseEnter,
  onMouseLeave,
}) => (
  <li
    onMouseEnter={onMouseEnter}
    onMouseLeave={onMouseLeave}
    className="relative"
  >
    {children}
  </li>
)

/* =========================
   Navigation Menu Trigger
========================= */

interface NavigationMenuTriggerProps extends ChildrenProps {
  isActive?: boolean
}

const NavigationMenuTrigger: React.FC<NavigationMenuTriggerProps> = ({
  children,
  isActive = false,
}) => (
  <button
    type="button"
    className={`inline-flex h-10 items-center justify-center px-4 py-2 text-xs transition-colors duration-300 focus:outline-none ${
      isActive ? "text-background" : "text-background/90 hover:text-background"
    }`}
  >
    {children}
  </button>
)

/* =========================
   Navigation Menu Content
========================= */

interface NavigationMenuContentProps extends ChildrenProps {
  isOpen?: boolean
}

const NavigationMenuContent: React.FC<NavigationMenuContentProps> = ({
  children,
  isOpen = false,
}) => {
  return (
    <div
      aria-hidden={!isOpen}
      className={`fixed top-12 right-0 left-0 z-40 w-screen transform-gpu overflow-hidden bg-foreground transition-[opacity,transform,visibility] duration-400 ease-[cubic-bezier(0.16,1,0.3,1)] ${
        isOpen
          ? "visible translate-y-0 opacity-100"
          : "pointer-events-none invisible -translate-y-2 opacity-0"
      } `}
    >
      <div className="mx-auto w-full max-w-4xl px-8 py-12">{children}</div>
    </div>
  )
}

/* =========================
   Exports
========================= */

export {
  NavigationMenu,
  NavigationMenuList,
  NavigationMenuItem,
  NavigationMenuTrigger,
  NavigationMenuContent,
}

"use client"

import * as React from "react"
import {
  ArrowUpRightIcon,
  FilePlus2Icon,
  LayoutTemplateIcon,
  PaletteIcon,
  PenToolIcon,
  SearchIcon,
} from "lucide-react"

import {
  CommandDialog,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
  CommandSeparator,
  CommandShortcut,
} from "@workspace/ui/components/command"

export function Search() {
  const [open, setOpen] = React.useState(false)

  React.useEffect(() => {
    const down = (e: KeyboardEvent) => {
      if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
        e.preventDefault()
        setOpen((open) => !open)
      }
    }

    document.addEventListener("keydown", down)
    return () => document.removeEventListener("keydown", down)
  }, [])

  return (
    <>
      <button className="" onClick={() => setOpen(true)}>
        <span className="flex grow items-center">
          <SearchIcon
            className="-ms-1 me-3 text-background hover:text-background/80"
            size={16}
            aria-hidden="true"
          />
        </span>
      </button>
      <CommandDialog open={open} onOpenChange={setOpen}>
        <CommandInput placeholder="Type to search components, assets, or docs..." />
        <CommandList>
          <CommandEmpty>No matches found.</CommandEmpty>

          <CommandGroup heading="Create">
            <CommandItem>
              <FilePlus2Icon
                size={16}
                className="opacity-60"
                aria-hidden="true"
              />
              <span>New project</span>
              <CommandShortcut className="justify-center">⌘N</CommandShortcut>
            </CommandItem>
            <CommandItem>
              <LayoutTemplateIcon
                size={16}
                className="opacity-60"
                aria-hidden="true"
              />
              <span>New template</span>
              <CommandShortcut className="justify-center">⌘T</CommandShortcut>
            </CommandItem>
            <CommandItem>
              <PenToolIcon
                size={16}
                className="opacity-60"
                aria-hidden="true"
              />
              <span>Start design</span>
              <CommandShortcut className="justify-center">⌘S</CommandShortcut>
            </CommandItem>
          </CommandGroup>

          <CommandSeparator />

          <CommandGroup heading="Navigate">
            <CommandItem>
              <ArrowUpRightIcon
                size={16}
                className="opacity-60"
                aria-hidden="true"
              />
              <span>Go to workspace</span>
            </CommandItem>
            <CommandItem>
              <ArrowUpRightIcon
                size={16}
                className="opacity-60"
                aria-hidden="true"
              />
              <span>Go to assets</span>
            </CommandItem>
            <CommandItem>
              <ArrowUpRightIcon
                size={16}
                className="opacity-60"
                aria-hidden="true"
              />
              <span>Go to documentation</span>
            </CommandItem>
          </CommandGroup>

          <CommandSeparator />

          <CommandGroup heading="Themes">
            <CommandItem>
              <PaletteIcon
                size={16}
                className="opacity-60"
                aria-hidden="true"
              />
              <span>Switch theme</span>
              <CommandShortcut>⌘⇧T</CommandShortcut>
            </CommandItem>
          </CommandGroup>
        </CommandList>
      </CommandDialog>
    </>
  )
}