1import React from "react";
2import { cn } from "@falnix/ui";
3
4type SpotlightProps = {
5  className?: string;
6  fill?: string;
7};
8
9export const Spotlight = ({ className, fill }: SpotlightProps) => {
10  return (
11    <svg
12      className={cn(
13        "animate-spotlight pointer-events-none absolute z-[1]  h-[169%] w-[138%] lg:w-[84%] opacity-0",
14        className
15      )}
16      xmlns="http://www.w3.org/2000/svg"
17      viewBox="0 0 3787 2842"
18      fill="none"
19    >
20      <g filter="url(#filter)">
21        <ellipse
22          cx="1924.71"
23          cy="273.501"
24          rx="1924.71"
25          ry="273.501"
26          transform="matrix(-0.822377 -0.568943 -0.568943 0.822377 3631.88 2291.09)"
27          fill={fill || "white"}
28          fillOpacity="0.21"
29        ></ellipse>
30      </g>
31      <defs>
32        <filter
33          id="filter"
34          x="0.860352"
35          y="0.838989"
36          width="3785.16"
37          height="2840.26"
38          filterUnits="userSpaceOnUse"
39          colorInterpolationFilters="sRGB"
40        >
41          <feFlood floodOpacity="0" result="BackgroundImageFix"></feFlood>
42          <feBlend
43            mode="normal"
44            in="SourceGraphic"
45            in2="BackgroundImageFix"
46            result="shape"
47          ></feBlend>
48          <feGaussianBlur
49            stdDeviation="151"
50            result="effect1_foregroundBlur_1065_8"
51          ></feGaussianBlur>
52        </filter>
53      </defs>
54    </svg>
55  );
56};