header-1

1---
2import { cn } from "@/lib/utils"
3import { Button } from "@/components/ui/button"
4import { Header, HeaderContainer, HeaderGroup } from "@/components/ui/header"
5import { Icon } from "@/components/ui/icon"
6import { Logo, LogoImage, LogoText } from "@/components/ui/logo"
7import {
8  NavigationMenu,
9  NavigationMenuItem,
10  NavigationMenuLink,
11  NavigationMenuList,
12} from "@/components/ui/navigation-menu"
13import {
14  Sheet,
15  SheetClose,
16  SheetContent,
17  SheetDescription,
18  SheetHeader,
19  SheetTitle,
20  SheetTrigger,
21} from "@/components/ui/sheet"
22 
23type Props = {
24  class?: string
25  logo: {
26    label: string
27    href: string
28    src?: any
29    srcLight?: any
30    srcDark?: any
31    alt?: string
32  }
33  navigation: {
34    label: string
35    href: string
36    active?: boolean
37    links?: {
38      label: string
39      href: string
40    }[]
41  }[]
42  buttons: {
43    label: string
44    href: string
45    icon?: string
46    variant?: "default" | "outline" | "secondary" | "ghost"
47  }[]
48}
49 
50const { class: className, logo, navigation, buttons } = Astro.props
51---
52 
53<Header class={cn("", className)}>
54  <HeaderContainer class="items-center justify-between gap-4">
55    <HeaderGroup>
56      <Logo href={logo.href}>
57        <LogoImage
58          src={logo.src}
59          srcLight={logo.srcLight}
60          srcDark={logo.srcDark}
61          alt={logo.alt}
62        />
63        {logo.label && <LogoText>{logo.label}</LogoText>}
64      </Logo>
65    </HeaderGroup>
66    <NavigationMenu class="hidden flex-none justify-start lg:flex">
67      <NavigationMenuList class="justify-start">
68        {
69          navigation.map((item, index) => (
70            <NavigationMenuItem value={`nav-${index}`}>
71              <NavigationMenuLink href={item.href} active={item.active}>
72                {item.label}
73              </NavigationMenuLink>
74            </NavigationMenuItem>
75          ))
76        }
77      </NavigationMenuList>
78    </NavigationMenu>
79    <HeaderGroup class="ml-auto hidden flex-1 justify-end lg:flex">
80      <slot />
81      {
82        buttons.map(({ label, icon, ...button }) => (
83          <Button
84            as="a"
85            size={icon && !label ? "icon-sm" : "sm"}
86            aria-label={label}
87            target={button.href.startsWith("http") ? "_blank" : undefined}
88            rel={button.href.startsWith("http") ? "noreferrer" : undefined}
89            {...button}
90          >
91            {icon && <Icon name={icon} />}
92            {label}
93          </Button>
94        ))
95      }
96    </HeaderGroup>
97// … truncated