header-2

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    links?: {
37      label: string
38      href: string
39    }[]
40  }[]
41  buttons: {
42    label: string
43    href: string
44    icon?: string
45    variant?: "default" | "outline" | "secondary" | "ghost"
46  }[]
47}
48 
49const { class: className, logo, navigation, buttons } = Astro.props
50---
51 
52<Header variant="floating" class={cn("", className)}>
53  <HeaderContainer class="justify-between">
54    <HeaderGroup>
55      <Logo href={logo.href}>
56        <LogoImage
57          src={logo.src}
58          srcLight={logo.srcLight}
59          srcDark={logo.srcDark}
60          alt={logo.alt}
61        />
62        {logo.label && <LogoText>{logo.label}</LogoText>}
63      </Logo>
64    </HeaderGroup>
65    <NavigationMenu
66      class="absolute left-1/2 hidden max-w-none -translate-x-1/2 lg:flex"
67    >
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    <HeaderGroup class="ml-auto hidden justify-end lg:flex">
81      <slot />
82      {
83        buttons.map(({ label, icon, ...button }) => (
84          <Button
85            as="a"
86            size={icon && !label ? "icon-sm" : "sm"}
87            aria-label={label}
88            target={button.href.startsWith("http") ? "_blank" : undefined}
89            rel={button.href.startsWith("http") ? "noreferrer" : undefined}
90            {...button}
91          >
92            {icon && <Icon name={icon} />}
93            {label}
94          </Button>
95        ))
96      }
97    </HeaderGroup>
98    <Sheet class="lg:hidden">
99      <SheetTrigger
100// … truncated