header-3

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 { Separator } from "@/components/ui/separator"
14import {
15  Sheet,
16  SheetClose,
17  SheetContent,
18  SheetDescription,
19  SheetHeader,
20  SheetTitle,
21  SheetTrigger,
22} from "@/components/ui/sheet"
23 
24type Props = {
25  class?: string
26  logo: {
27    label: string
28    href: string
29    src?: any
30    srcLight?: any
31    srcDark?: any
32    alt?: string
33  }
34  navigation: {
35    label: string
36    href: string
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("border-b", className)}>
54  <HeaderContainer class="justify-between">
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    <HeaderGroup class="ml-auto hidden justify-end gap-1 lg:flex">
67      <NavigationMenu class="hidden max-w-none justify-end lg:flex">
68        <NavigationMenuList>
69          {
70            navigation.map((item, index) => (
71              <NavigationMenuItem value={`nav-${index}`}>
72                <NavigationMenuLink href={item.href}>
73                  {item.label}
74                </NavigationMenuLink>
75              </NavigationMenuItem>
76            ))
77          }
78        </NavigationMenuList>
79      </NavigationMenu>
80      <Separator
81        orientation="vertical"
82        class="mx-1 hidden h-5 self-center lg:block"
83      />
84      <slot />
85      {
86        buttons.map(({ label, icon, ...button }) => (
87          <Button
88            as="a"
89            size={icon && !label ? "icon-sm" : "sm"}
90            aria-label={label}
91            target={button.href.startsWith("http") ? "_blank" : undefined}
92            rel={button.href.startsWith("http") ? "noreferrer" : undefined}
93            {...button}
94          >
95// … truncated