section

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<"section"> & VariantProps<typeof variants>
8 
9const variants = cva("relative flex scroll-mt-12 flex-col gap-16 py-16", {
10  variants: {
11    variant: {
12      default: "bg-background w-full",
13      floating:
14        "bg-background mx-auto my-16 w-[calc(100%-2rem)] max-w-[calc(var(--container,1280px)-2rem)] overflow-hidden rounded-xl border shadow-md",
15    },
16  },
17  defaultVariants: {
18    variant: "default",
19  },
20})
21 
22const { class: className, variant, ...props } = Astro.props
23---
24 
25<section
26  class={cn(variants({ variant }), className)}
27  data-slot="section"
28  data-variant={variant}
29  {...props}
30>
31  <slot />
32</section>