gradient

1---
2import type { HTMLAttributes } from "astro/types"
3import { cva, type VariantProps } from "class-variance-authority"
4 
5import { cn } from "@/lib/utils"
6 
7const gradientVariants = cva(
8  "bg-primary pointer-events-none absolute inset-0 opacity-50 [--gradient-stops:black,transparent]",
9  {
10    variants: {
11      variant: {
12        radial:
13          "[mask-image:radial-gradient(ellipse_at_var(--gradient-position),var(--gradient-stops))] [-webkit-mask-image:radial-gradient(ellipse_at_var(--gradient-position),var(--gradient-stops))]",
14        linear:
15          "[mask-image:linear-gradient(var(--gradient-direction),var(--gradient-stops))] [-webkit-mask-image:linear-gradient(var(--gradient-direction),var(--gradient-stops))]",
16      },
17      direction: {
18        left: "[--gradient-direction:to_left] [--gradient-position:0%_50%]",
19        right: "[--gradient-direction:to_right] [--gradient-position:100%_50%]",
20        top: "[--gradient-direction:to_top] [--gradient-position:50%_0%]",
21        bottom:
22          "[--gradient-direction:to_bottom] [--gradient-position:50%_100%]",
23        center:
24          "[--gradient-direction:to_bottom] [--gradient-position:50%_50%]",
25      },
26    },
27    defaultVariants: {
28      variant: "radial",
29      direction: "bottom",
30    },
31  }
32)
33 
34type Props = HTMLAttributes<"div"> & VariantProps<typeof gradientVariants>
35 
36const { class: className, variant, direction, ...props } = Astro.props
37---
38 
39<div
40  data-slot="gradient"
41  aria-hidden="true"
42  class={cn(gradientVariants({ variant, direction }), className)}
43  {...props}
44>
45</div>