update: BackgroundAnimation simplification

Author: MichaelTeida

README.md

@@ -22,8 +22,8 @@ NeuraChatAi is an AI-powered chat application that offers customizable chat expe
 * OpenAI API 4.24.7
 * Joy UI
 * React Router
-* Lodash
 * Material Icons
+* Lodash
 * Day.js
 * Sass
 * JS
@@ -47,4 +47,5 @@ Once the application is running, you can:
 - Receive AI-generated responses based on your inputs.
 - Explore tip suggestions for conversation starters.
 
+
 Feel free to reach out if you have any questions, feedback, or suggestions. Happy chatting with NeuraChatAi!

src/components/BackgroundAnimation.jsx

@@ -10,47 +10,29 @@ function BackgroundAnimation() {
         mode === 'light' ? setOpacity("20%") : setOpacity("40%")
     },[mode])
 
+    const generateBoxes = () => {
+        return Array.from({ length: 20 }, (_, index) => (
+            <Box
+                key={index}
+                component="span"
+            ></Box>
+        ));
+    };
+
+    const generateBoxesWithSx = () => {
+        return Array.from({ length: 19 }, (_, index) => (
+            <Box
+                key={index}
+                component="span"
+                sx={{ display: { xs: "none", md: "inline" } }}
+            ></Box>
+        ));
+    };
+
     return (
             <Box sx={{opacity: opacity}} className="background">
-                <Box component="span"></Box>
-                <Box component="span"></Box>
-                <Box component="span"></Box>
-                <Box component="span"></Box>
-                <Box component="span"></Box>
-                <Box component="span"></Box>
-                <Box component="span"></Box>
-                <Box component="span"></Box>
-                <Box component="span"></Box>
-                <Box component="span"></Box>
-                <Box component="span"></Box>
-                <Box component="span"></Box>
-                <Box component="span"></Box>
-                <Box component="span"></Box>
-                <Box component="span"></Box>
-                <Box component="span"></Box>
-                <Box component="span"></Box>
-                <Box component="span"></Box>
-                <Box component="span"></Box>
-                <Box component="span"></Box>
-                <Box component="span"></Box>
-                <Box component="span"></Box>
-                <Box component="span"></Box>
-                <Box component="span"></Box>
-                <Box component="span"></Box>
-                <Box component="span"></Box>
-                <Box component="span"></Box>
-                <Box component="span"></Box>
-                <Box component="span"></Box>
-                <Box component="span"></Box>
-                <Box component="span"></Box>
-                <Box component="span"></Box>
-                <Box component="span"></Box>
-                <Box component="span"></Box>
-                <Box component="span"></Box>
-                <Box component="span"></Box>
-                <Box component="span"></Box>
-                <Box component="span"></Box>
-                <Box component="span"></Box>
+                {generateBoxes()}
+                {generateBoxesWithSx()}
         </Box>
     );
 }