style: clean up code formatting and remove trailing whitespace

refactor: reorganize imports and fix type imports

components/ui/neon-gradient-card.tsx

@@ -1,19 +1,19 @@
-"use client"
+"use client";
 
 import {
-  CSSProperties,
-  ReactElement,
-  ReactNode,
+  type CSSProperties,
+  type ReactElement,
+  type ReactNode,
   useEffect,
   useRef,
   useState,
-} from "react"
+} from "react";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 interface NeonColorsProps {
-  firstColor: string
-  secondColor: string
+  firstColor: string;
+  secondColor: string;
 }
 
 interface NeonGradientCardProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -23,14 +23,14 @@ interface NeonGradientCardProps extends React.HTMLAttributes<HTMLDivElement> {
    * @description
    * The component to be rendered as the card
    * */
-  as?: ReactElement
+  as?: ReactElement;
   /**
    * @default ""
    * @type string
    * @description
    * The className of the card
    */
-  className?: string
+  className?: string;
 
   /**
    * @default ""
@@ -38,7 +38,7 @@ interface NeonGradientCardProps extends React.HTMLAttributes<HTMLDivElement> {
    * @description
    * The children of the card
    * */
-  children?: ReactNode
+  children?: ReactNode;
 
   /**
    * @default 5
@@ -46,7 +46,7 @@ interface NeonGradientCardProps extends React.HTMLAttributes<HTMLDivElement> {
    * @description
    * The size of the border in pixels
    * */
-  borderSize?: number
+  borderSize?: number;
 
   /**
    * @default 20
@@ -54,7 +54,7 @@ interface NeonGradientCardProps extends React.HTMLAttributes<HTMLDivElement> {
    * @description
    * The size of the radius in pixels
    * */
-  borderRadius?: number
+  borderRadius?: number;
 
   /**
    * @default "{ firstColor: '#ff00aa', secondColor: '#00FFF1' }"
@@ -62,7 +62,7 @@ interface NeonGradientCardProps extends React.HTMLAttributes<HTMLDivElement> {
    * @description
    * The colors of the neon gradient
    * */
-  neonColors?: NeonColorsProps
+  neonColors?: NeonColorsProps;
 }
 
 export const NeonGradientCard: React.FC<NeonGradientCardProps> = ({
@@ -76,31 +76,31 @@ export const NeonGradientCard: React.FC<NeonGradientCardProps> = ({
   },
   ...props
 }) => {
-  const containerRef = useRef<HTMLDivElement>(null)
-  const [dimensions, setDimensions] = useState({ width: 0, height: 0 })
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
 
   useEffect(() => {
     const updateDimensions = () => {
       if (containerRef.current) {
-        const { offsetWidth, offsetHeight } = containerRef.current
-        setDimensions({ width: offsetWidth, height: offsetHeight })
+        const { offsetWidth, offsetHeight } = containerRef.current;
+        setDimensions({ width: offsetWidth, height: offsetHeight });
       }
-    }
+    };
 
-    updateDimensions()
-    window.addEventListener("resize", updateDimensions)
+    updateDimensions();
+    window.addEventListener("resize", updateDimensions);
 
     return () => {
-      window.removeEventListener("resize", updateDimensions)
-    }
-  }, [])
+      window.removeEventListener("resize", updateDimensions);
+    };
+  }, []);
 
   useEffect(() => {
     if (containerRef.current) {
-      const { offsetWidth, offsetHeight } = containerRef.current
-      setDimensions({ width: offsetWidth, height: offsetHeight })
+      const { offsetWidth, offsetHeight } = containerRef.current;
+      setDimensions({ width: offsetWidth, height: offsetHeight });
     }
-  }, [children])
+  }, []);
 
   return (
     <div
@@ -122,7 +122,7 @@ export const NeonGradientCard: React.FC<NeonGradientCardProps> = ({
       }
       className={cn(
         "relative z-10 size-full rounded-[var(--border-radius)]",
-        className
+        className,
       )}
       {...props}
     >
@@ -138,11 +138,11 @@ export const NeonGradientCard: React.FC<NeonGradientCardProps> = ({
           "after:bg-[linear-gradient(0deg,var(--neon-first-color),var(--neon-second-color))] after:bg-[length:100%_200%] after:opacity-80",
           "after:animate-background-position-spin",
           "dark:bg-neutral-900",
-          "break-words"
+          "break-words",
         )}
       >
         {children}
       </div>
     </div>
-  )
-}
+  );
+};