header-5

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