header

1---
2import type { HTMLAttributes } from "astro/types"
3import { cva, type VariantProps } from "class-variance-authority"
4 
5import { cn } from "@/lib/utils"
6 
7type Props = HTMLAttributes<"header"> & VariantProps<typeof variants>
8 
9const variants = cva("relative z-50 flex w-full items-center gap-4 py-2", {
10  variants: {
11    variant: {
12      default: "",
13      floating:
14        "bg-background mx-auto my-2 w-[calc(100%-2rem)] max-w-[calc(var(--container,1280px)-2rem)] overflow-hidden rounded-lg border shadow-sm",
15    },
16  },
17  defaultVariants: {
18    variant: "default",
19  },
20})
21 
22const { class: className, variant, ...props } = Astro.props
23---
24 
25<header
26  class={cn(variants({ variant }), className)}
27  data-slot="header"
28  data-variant={variant}
29  {...props}
30>
31  <slot />
32</header>