Header One

1'use client'
2import Link from 'next/link'
3import { Button } from '@/components/ui/button'
4import { Hexagon, PanelRight, X } from 'lucide-react'
5 
6import { useState } from 'react'
7import { AnimatePresence, motion, useReducedMotion } from 'motion/react'
8import LogoMark from '@/site/ui-library/ui-library-logo'
9 
10const navLinks = [
11  { name: 'About', href: '#link' },
12  { name: 'Features', href: '#link' },
13  { name: 'Blog', href: '#link' },
14  { name: 'Contact Us', href: '#link' },
15]
16 
17export default function HeaderOne() {
18  return (
19    <header className="relative w-full">
20      <DesktopNavbar />
21      <MobileNavbar />
22    </header>
23  )
24}
25 
26function DesktopNavbar() {
27  return (
28    <nav className="sticky top-0 z-20 w-full border-b bg-background/50 backdrop-blur-3xl">
29      <div className="mx-auto hidden max-w-6xl items-center justify-between gap-6 px-4 py-3 md:flex">
30        <div className="flex items-center gap-2">
31          <LogoMark aria-hidden="true" />
32          <span className="font-semibold">Nav UI</span>
33        </div>
34 
35        <div className="flex items-center justify-center gap-8">
36          {navLinks.map((item) => (
37            <Link
38              href={item.href}
39              key={item.name}
40              className="text-sm font-medium text-muted-foreground transition-colors duration-200 hover:text-black dark:text-neutral-400"
41            >
42              {item.name}
43            </Link>
44          ))}
45        </div>
46 
47        <div className="flex items-center gap-4">
48          <Button className="border ring-1 ring-muted" variant="default" asChild>
49            <Link href="#login">Login</Link>
50          </Button>
51          <Button variant="outline" asChild>
52            <Link href="#sign-up">Sign Up</Link>
53          </Button>
54        </div>
55      </div>
56    </nav>
57  )
58}
59 
60function MobileNavbar() {
61  const [open, setOpen] = useState(false)
62  const shouldReduceMotion = useReducedMotion()
63 
64  return (
65    <nav className="relative flex justify-between px-4 py-3 md:hidden">
66      <div className="flex items-center gap-2">
67        <Hexagon aria-hidden="true" className="size-8 stroke-neutral-200 stroke-2" />
68        <span className="font-semibold">Nav UI</span>
69      </div>
70 
71      <button
72        type="button"
73        aria-label="Open navigation menu"
74        aria-expanded={open}
75        aria-controls="header-one-mobile-menu"
76        onClick={() => {
77          setOpen(!open)
78        }}
79      >
80        <PanelRight aria-hidden="true" className="size-5 open:hidden" />
81// … truncated