Convert Background to Typescript

src/components/Background/Background.tsx

@@ -1,12 +1,17 @@
 import styles from "./Background.module.css";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState, ReactNode } from "react";
 
-const Background = ({ children, className }) => {
+interface BackgroundProps {
+  children?: ReactNode;
+  className?: string;
+}
 
-    const circlesRef = useRef([]);
+const Background = ({ children, className }: BackgroundProps) => {
+
+    const circlesRef = useRef<(HTMLDivElement | null)[]>([]);
     const [theme, setTheme] = useState("light");
 
-  const getRandomTranslation = () => {
+  const getRandomTranslation = (): { x: number; y: number } => {
     const randomX = Math.floor(Math.random() * 100) - 30;
     const randomY = Math.floor(Math.random() * 100) - 30;
     return { x: randomX, y: randomY };
@@ -27,7 +32,7 @@ const Background = ({ children, className }) => {
             setTheme(localStorage.getItem("theme") || "light");
         };
 
-        updateTheme(); // Initial load
+        updateTheme();
 
         window.addEventListener("theme-changed", updateTheme);
 
@@ -40,29 +45,29 @@ const Background = ({ children, className }) => {
     return (
     <div className={`${styles.backgroundContainer} ${className || ''} ${theme === "light" ? styles.backgroundLight : styles.backgroundDark}`}>
       <div
-        ref={(el) => (circlesRef.current[0] = el)}
+        ref={(el) => { circlesRef.current[0] = el; }}
         className={`${styles["circle"]} ${styles["circle-1"]}`}
-        style={{ "--random-x": "0px", "--random-y": "0px" }}
+        style={{ "--random-x": "0px", "--random-y": "0px" } as React.CSSProperties}
       ></div>
       <div
-        ref={(el) => (circlesRef.current[1] = el)}
+        ref={(el) => { circlesRef.current[1] = el; }}
         className={`${styles["circle"]} ${styles["circle-2"]}`}
-        style={{ "--random-x": "0px", "--random-y": "0px" }}
+        style={{ "--random-x": "0px", "--random-y": "0px" } as React.CSSProperties}
       ></div>
       <div
-        ref={(el) => (circlesRef.current[2] = el)}
+        ref={(el) => { circlesRef.current[2] = el; }}
         className={`${styles["circle"]} ${styles["circle-3"]}`}
-        style={{ "--random-x": "0px", "--random-y": "0px" }}
+        style={{ "--random-x": "0px", "--random-y": "0px" } as React.CSSProperties}
       ></div>
       <div
-        ref={(el) => (circlesRef.current[3] = el)}
+        ref={(el) => { circlesRef.current[3] = el; }}
         className={`${styles["circle"]} ${styles["circle-4"]}`}
-        style={{ "--random-x": "0px", "--random-y": "0px" }}
+        style={{ "--random-x": "0px", "--random-y": "0px" } as React.CSSProperties}
       ></div>
       <div
-        ref={(el) => (circlesRef.current[4] = el)}
+        ref={(el) => { circlesRef.current[4] = el; }}
         className={`${styles["circle"]} ${styles["circle-5"]}`}
-        style={{ "--random-x": "0px", "--random-y": "0px" }}
+        style={{ "--random-x": "0px", "--random-y": "0px" } as React.CSSProperties}
       ></div>
       {children}
     </div>