Header Navigation

1import * as React from "react"
2 
3import { cn } from "@/lib/utils"
4 
5export type HeaderNavigationMenuItem = {
6  name: string
7  onClick?: () => void
8}
9 
10export type HeaderNavigationProps = React.HTMLAttributes<HTMLElement> & {
11  title: string
12  menuItems?: HeaderNavigationMenuItem[]
13  currentIndex?: number
14}
15 
16export function HeaderNavigation({
17  title,
18  menuItems = [],
19  currentIndex,
20  className,
21  ...props
22}: HeaderNavigationProps) {
23  return (
24    <header
25      className={cn(
26        "mx-0 my-5 flex items-center justify-between gap-4 px-6 py-4",
27        "bg-[rgba(4,37,43,0.4)] bg-[linear-gradient(rgba(214,214,214,0.1)_0%,rgba(4,37,43,0.4)_4%,rgba(4,37,43,0.4)_80%,rgba(4,37,43,0.4)_90%,rgba(214,214,214,0.1)_100%)]",
28        "shadow-[0_0_2.5rem_0_rgba(214,214,214,0.3)]",
29        className
30      )}
31      {...props}
32    >
33      <h1 className="m-0 flex-grow text-base sm:text-xl md:text-2xl lg:text-3xl">
34        {title}
35      </h1>
36      {menuItems.length > 0 && (
37        <nav className="flex items-center gap-3 text-[0.625rem] sm:text-sm md:text-base">
38          {menuItems.map((item, index) => {
39            const isCurrent = index === currentIndex
40            if (isCurrent || !item.onClick) {
41              return (
42                <span key={`${item.name}-${index}`} aria-current={isCurrent ? "page" : undefined}>
43                  {item.name}
44                </span>
45              )
46            }
47            return (
48              <button
49                key={`${item.name}-${index}`}
50                type="button"
51                onClick={item.onClick}
52                className="underline decoration-primary underline-offset-4 hover:text-primary"
53              >
54                {item.name}
55              </button>
56            )
57          })}
58        </nav>
59      )}
60    </header>
61  )
62}