alert

1---
2import type { HTMLAttributes } from "astro/types"
3import { cva, type VariantProps } from "class-variance-authority"
4 
5import { cn } from "@/lib/utils"
6 
7type Props = VariantProps<typeof variants> & HTMLAttributes<"div">
8 
9const variants = cva(
10  "group/alert relative grid w-full gap-0.5 rounded-lg border px-4 py-3 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2.5 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4",
11  {
12    variants: {
13      variant: {
14        default: "bg-card text-card-foreground",
15        destructive:
16          "text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current",
17      },
18    },
19    defaultVariants: {
20      variant: "default",
21    },
22  }
23)
24 
25const { class: className, variant, ...props } = Astro.props
26---
27 
28<div
29  data-slot="alert"
30  role="alert"
31  class={cn(variants({ variant }), className)}
32  {...props}
33>
34  <slot />
35</div>