fix: build errors

Author: danieldanielecki

components/ParticlesFooter.tsx

@@ -13,125 +13,127 @@ export default function ParticlesFooter() {
   const particlesRef = useRef<HTMLDivElement>(null);
   const { theme } = useTheme();
 
-  useEffect(() => {
-    const loadParticles = async () => {
-      // Load particles.js script
-      if (!window.particlesJS) {
-        const script = document.createElement("script");
-        script.src =
-          "https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js";
-        script.onload = () => {
-          initializeParticles();
-        };
-        document.head.appendChild(script);
-      } else {
-        initializeParticles();
-      }
-    };
-
-    const initializeParticles = () => {
-      if (particlesRef.current && window.particlesJS) {
-        window.particlesJS("particles-footer", {
-          particles: {
-            number: {
-              value: 70,
-              density: {
-                enable: true,
-                value_area: 1400,
-              },
+  const initializeParticles = () => {
+    const particlesElement = particlesRef.current;
+    if (particlesElement && window.particlesJS) {
+      window.particlesJS("particles-footer", {
+        particles: {
+          number: {
+            value: 70,
+            density: {
+              enable: true,
+              value_area: 1400,
             },
-            color: {
-              value: "#3f51b5",
+          },
+          color: {
+            value: "#3f51b5",
+          },
+          shape: {
+            type: "polygon",
+            stroke: {
+              width: 1,
+              color: "#3f51b5",
             },
-            shape: {
-              type: "polygon",
-              stroke: {
-                width: 1,
-                color: "#3f51b5",
-              },
-              polygon: {
-                nb_sides: 6,
-              },
+            polygon: {
+              nb_sides: 6,
             },
-            opacity: {
-              value: 1,
-              random: true,
-              anim: {
-                enable: true,
-                speed: 0.8,
-                opacity_min: 0.25,
-                sync: true,
-              },
+          },
+          opacity: {
+            value: 1,
+            random: true,
+            anim: {
+              enable: true,
+              speed: 0.8,
+              opacity_min: 0.25,
+              sync: true,
             },
-            size: {
-              value: 2,
-              random: true,
-              anim: {
-                enable: true,
-                speed: 10,
-                size_min: 1.25,
-                sync: true,
-              },
+          },
+          size: {
+            value: 2,
+            random: true,
+            anim: {
+              enable: true,
+              speed: 10,
+              size_min: 1.25,
+              sync: true,
             },
-            line_linked: {
+          },
+          line_linked: {
+            enable: true,
+            distance: 150,
+            color: "#3f51b5",
+            opacity: 1,
+            width: 1,
+          },
+          move: {
+            enable: true,
+            speed: 8,
+            direction: "none",
+            random: true,
+            straight: false,
+            out_mode: "out",
+            bounce: true,
+            attract: {
               enable: true,
-              distance: 150,
-              color: "#3f51b5",
-              opacity: 1,
-              width: 1,
+              rotateX: 2000,
+              rotateY: 2000,
+            },
+          },
+        },
+        interactivity: {
+          detect_on: "canvas",
+          events: {
+            onhover: {
+              enable: true,
+              mode: "grab",
             },
-            move: {
+            onclick: {
               enable: true,
-              speed: 8,
-              direction: "none",
-              random: true,
-              straight: false,
-              out_mode: "out",
-              bounce: true,
-              attract: {
-                enable: true,
-                rotateX: 2000,
-                rotateY: 2000,
-              },
+              mode: "repulse",
             },
+            resize: true,
           },
-          interactivity: {
-            detect_on: "canvas",
-            events: {
-              onhover: {
-                enable: true,
-                mode: "grab",
-              },
-              onclick: {
-                enable: true,
-                mode: "repulse",
+          modes: {
+            grab: {
+              distance: 200,
+              line_linked: {
+                opacity: 3,
               },
-              resize: true,
             },
-            modes: {
-              grab: {
-                distance: 200,
-                line_linked: {
-                  opacity: 3,
-                },
-              },
-              repulse: {
-                distance: 250,
-                duration: 2,
-              },
+            repulse: {
+              distance: 250,
+              duration: 2,
             },
           },
-          retina_detect: true,
-        });
+        },
+        retina_detect: true,
+      });
+    }
+  };
+
+  useEffect(() => {
+    const loadParticles = async () => {
+      // Load particles.js script
+      if (!window.particlesJS) {
+        const script = document.createElement("script");
+        script.src =
+          "https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js";
+        script.onload = () => {
+          initializeParticles();
+        };
+        document.head.appendChild(script);
+      } else {
+        initializeParticles();
       }
     };
 
     loadParticles();
 
     // Cleanup
     return () => {
-      if (particlesRef.current) {
-        particlesRef.current.innerHTML = "";
+      const particlesElement = particlesRef.current;
+      if (particlesElement) {
+        particlesElement.innerHTML = "";
       }
     };
   }, [theme]);

components/QuizExamForm.tsx

@@ -221,10 +221,13 @@ const QuizExamForm: FC<Props> = ({
         )}
         {selectedImage && (
           <div className="fixed top-0 left-0 z-50 w-full h-full flex justify-center items-center bg-black bg-opacity-50">
-            <img
+            <Image
               src={link + selectedImage.url}
               alt={selectedImage.alt}
               className="max-w-[90%] max-h-[90%]"
+              width={800}
+              height={600}
+              unoptimized
             />
             <button
               onClick={() => setSelectedImage(null)}

components/QuizExamFormUF.tsx

@@ -202,10 +202,13 @@ const QuizExamForm: FC<Props> = ({
         )}
         {selectedImage && (
           <div className="fixed top-0 left-0 z-50 w-full h-full flex justify-center items-center bg-black bg-opacity-50">
-            <img
+            <Image
               src={link + selectedImage.url}
               alt={selectedImage.alt}
               className="max-w-[90%] max-h-[90%]"
+              width={800}
+              height={600}
+              unoptimized
             />
             <button
               onClick={() => setSelectedImage(null)}

components/QuizForm.tsx

@@ -150,8 +150,8 @@ const QuizForm: FC<Props> = ({
                 🎉 Practice Complete!
               </h2>
               <p className="text-gray-600 dark:text-gray-400 text-lg mb-6">
-                You've completed all {totalQuestions} questions in this practice
-                session.
+                You&apos;ve completed all {totalQuestions} questions in this
+                practice session.
               </p>
             </div>
 
@@ -307,10 +307,13 @@ const QuizForm: FC<Props> = ({
             onClick={handleClickOutside}
             className="fixed top-0 left-0 z-50 w-full h-full flex justify-center items-center bg-black bg-opacity-50"
           >
-            <img
+            <Image
               src={link + selectedImage.url}
               alt={selectedImage.alt}
               className="max-w-[90%] max-h-[90%]"
+              width={800}
+              height={600}
+              unoptimized
             />
             <button
               onClick={() => setSelectedImage(null)}