Neon Gradient Card

1"use client"
2 
3import {
4  useEffect,
5  useRef,
6  useState,
7  type CSSProperties,
8  type ReactElement,
9  type ReactNode,
10} from "react"
11 
12import { cn } from "@/lib/utils"
13 
14interface NeonColorsProps {
15  firstColor: string
16  secondColor: string
17}
18 
19interface NeonGradientCardProps extends React.HTMLAttributes<HTMLDivElement> {
20  /**
21   * @default <div />
22   * @type ReactElement
23   * @description
24   * The component to be rendered as the card
25   * */
26  as?: ReactElement
27  /**
28   * @default ""
29   * @type string
30   * @description
31   * The className of the card
32   */
33  className?: string
34 
35  /**
36   * @default ""
37   * @type ReactNode
38   * @description
39   * The children of the card
40   * */
41  children?: ReactNode
42 
43  /**
44   * @default 5
45   * @type number
46   * @description
47   * The size of the border in pixels
48   * */
49  borderSize?: number
50 
51  /**
52   * @default 20
53   * @type number
54   * @description
55   * The size of the radius in pixels
56   * */
57  borderRadius?: number
58 
59  /**
60   * @default "{ firstColor: '#ff00aa', secondColor: '#00FFF1' }"
61   * @type string
62   * @description
63   * The colors of the neon gradient
64   * */
65  neonColors?: NeonColorsProps
66}
67 
68export const NeonGradientCard: React.FC<NeonGradientCardProps> = ({
69  className,
70  children,
71  borderSize = 2,
72  borderRadius = 20,
73  neonColors = {
74    firstColor: "#ff00aa",
75    secondColor: "#00FFF1",
76  },
77  ...props
78}) => {
79  const containerRef = useRef<HTMLDivElement>(null)
80  const [dimensions, setDimensions] = useState({ width: 0, height: 0 })
81 
82  useEffect(() => {
83    const updateDimensions = () => {
84      if (containerRef.current) {
85        const { offsetWidth, offsetHeight } = containerRef.current
86        setDimensions({ width: offsetWidth, height: offsetHeight })
87      }
88    }
89 
90    updateDimensions()
91    window.addEventListener("resize", updateDimensions)
92 
93    return () => {
94      window.removeEventListener("resize", updateDimensions)
95    }
96  }, [])
97 
98  useEffect(() => {
99    if (containerRef.current) {
100      const { offsetWidth, offsetHeight } = containerRef.current
101      setDimensions({ width: offsetWidth, height: offsetHeight })
102    }
103  }, [children])
104 
105  return (
106    <div
107      ref={containerRef}
108      style={
109        {
110          "--border-size": `${borderSize}px`,
111          "--border-radius": `${borderRadius}px`,
112          "--neon-first-color": neonColors.firstColor,
113          "--neon-second-color": neonColors.secondColor,
114          "--card-width": `${dimensions.width}px`,
115// … truncated