Glow

1import { cva, VariantProps } from "class-variance-authority";
2import React from "react";
3 
4import { cn } from "@/lib/utils";
5 
6const glowVariants = cva("absolute w-full", {
7  variants: {
8    variant: {
9      top: "top-0",
10      above: "-top-[128px]",
11      bottom: "bottom-0",
12      below: "-bottom-[128px]",
13      center: "top-[50%]",
14    },
15  },
16  defaultVariants: {
17    variant: "top",
18  },
19});
20 
21function Glow({
22  className,
23  variant,
24  ...props
25}: React.ComponentProps<"div"> & VariantProps<typeof glowVariants>) {
26  return (
27    <div
28      data-slot="glow"
29      className={cn(glowVariants({ variant }), className)}
30      {...props}
31    >
32      <div
33        className={cn(
34          "from-brand-foreground/50 to-brand-foreground/0 absolute left-1/2 h-[256px] w-[60%] -translate-x-1/2 scale-[2.5] rounded-[50%] bg-radial from-10% to-60% opacity-20 sm:h-[512px] dark:opacity-100",
35          variant === "center" && "-translate-y-1/2",
36        )}
37      />
38      <div
39        className={cn(
40          "from-brand/30 to-brand-foreground/0 absolute left-1/2 h-[128px] w-[40%] -translate-x-1/2 scale-200 rounded-[50%] bg-radial from-10% to-60% opacity-20 sm:h-[256px] dark:opacity-100",
41          variant === "center" && "-translate-y-1/2",
42        )}
43      />
44    </div>
45  );
46}
47 
48export default Glow;