From 7b394b92d9d303c9f53791bbf3e8094b261727ac Mon Sep 17 00:00:00 2001
From: Alvin <524715@vistacollege.nl>
Date: Tue, 10 Jun 2025 09:52:55 +0200
Subject: [PATCH] Refactor CarModifications component to use SVG icons instead
 of placeholder images for better visual representation of car modifications.
 Update icon imports and adjust rendering logic accordingly.

---
 client/src/assets/icons/brakes.svg        |  7 ++++
 client/src/assets/icons/engine.svg        |  5 +++
 client/src/assets/icons/exhaust.svg       |  6 +++
 client/src/assets/icons/suspension.svg    |  6 +++
 client/src/assets/icons/wheels.svg        |  8 ++++
 client/src/components/CarModifications.js | 47 ++++++++++++++++-------
 6 files changed, 65 insertions(+), 14 deletions(-)
 create mode 100644 client/src/assets/icons/brakes.svg
 create mode 100644 client/src/assets/icons/engine.svg
 create mode 100644 client/src/assets/icons/exhaust.svg
 create mode 100644 client/src/assets/icons/suspension.svg
 create mode 100644 client/src/assets/icons/wheels.svg

diff --git a/client/src/assets/icons/brakes.svg b/client/src/assets/icons/brakes.svg
new file mode 100644
index 0000000..aab4f85
--- /dev/null
+++ b/client/src/assets/icons/brakes.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z" fill="currentColor"/>
+  <path d="M12 6c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6zm0 10c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4z" fill="currentColor"/>
+  <path d="M12 8c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 6c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z" fill="currentColor"/>
+  <path d="M12 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" fill="currentColor"/>
+</svg> 
\ No newline at end of file
diff --git a/client/src/assets/icons/engine.svg b/client/src/assets/icons/engine.svg
new file mode 100644
index 0000000..443fc83
--- /dev/null
+++ b/client/src/assets/icons/engine.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M7 4v2h3v2H7l-2 2v3H3v-3H1v8h2v-3h2v3h3l2 2h8v-4h2v3h3V9h-3v3h-2V8h-6V6h3V4H7z" fill="currentColor"/>
+  <path d="M18 10.5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5-1.5-.67-1.5-1.5.67-1.5 1.5-1.5z" fill="currentColor"/>
+</svg> 
\ No newline at end of file
diff --git a/client/src/assets/icons/exhaust.svg b/client/src/assets/icons/exhaust.svg
new file mode 100644
index 0000000..777ce6f
--- /dev/null
+++ b/client/src/assets/icons/exhaust.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M3 12h2v2H3v-2zm4 0h2v2H7v-2zm4 0h2v2h-2v-2zm4 0h2v2h-2v-2zm4 0h2v2h-2v-2z" fill="currentColor"/>
+  <path d="M3 8h2v2H3V8zm4 0h2v2H7V8zm4 0h2v2h-2V8zm4 0h2v2h-2V8zm4 0h2v2h-2V8z" fill="currentColor"/>
+  <path d="M3 16h2v2H3v-2zm4 0h2v2H7v-2zm4 0h2v2h-2v-2zm4 0h2v2h-2v-2zm4 0h2v2h-2v-2z" fill="currentColor"/>
+</svg> 
\ No newline at end of file
diff --git a/client/src/assets/icons/suspension.svg b/client/src/assets/icons/suspension.svg
new file mode 100644
index 0000000..0b3bea6
--- /dev/null
+++ b/client/src/assets/icons/suspension.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z" fill="currentColor"/>
+  <path d="M12 6c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6zm0 10c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4z" fill="currentColor"/>
+  <path d="M12 8c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 6c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z" fill="currentColor"/>
+</svg> 
\ No newline at end of file
diff --git a/client/src/assets/icons/wheels.svg b/client/src/assets/icons/wheels.svg
new file mode 100644
index 0000000..880b990
--- /dev/null
+++ b/client/src/assets/icons/wheels.svg
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z" fill="currentColor"/>
+  <path d="M12 6c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6zm0 10c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4z" fill="currentColor"/>
+  <path d="M12 8c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 6c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z" fill="currentColor"/>
+  <path d="M12 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" fill="currentColor"/>
+  <path d="M12 12c0 0-2-2-2-2s-2 2-2 2 2 2 2 2 2-2 2-2-2-2-2-2z" fill="currentColor"/>
+</svg> 
\ No newline at end of file
diff --git a/client/src/components/CarModifications.js b/client/src/components/CarModifications.js
index 5fe7c70..05ee3c1 100644
--- a/client/src/components/CarModifications.js
+++ b/client/src/components/CarModifications.js
@@ -6,14 +6,19 @@ import {
   Paper,
   Card,
   CardContent,
-  CardMedia,
-  Button,
   Box,
   TextField,
   InputAdornment,
 } from '@mui/material';
 import SearchIcon from '@mui/icons-material/Search';
 
+// Import SVG icons
+import engineIcon from '../assets/icons/engine.svg';
+import exhaustIcon from '../assets/icons/exhaust.svg';
+import suspensionIcon from '../assets/icons/suspension.svg';
+import brakesIcon from '../assets/icons/brakes.svg';
+import wheelsIcon from '../assets/icons/wheels.svg';
+
 const CarModifications = () => {
   const [searchTerm, setSearchTerm] = useState('');
 
@@ -24,7 +29,7 @@ const CarModifications = () => {
       name: 'Performance Chip',
       description: 'Increase engine power and torque with our custom ECU tuning',
       price: '€299',
-      image: 'https://via.placeholder.com/300x200?text=Performance+Chip',
+      icon: engineIcon,
       category: 'Engine',
     },
     {
@@ -32,7 +37,7 @@ const CarModifications = () => {
       name: 'Sport Exhaust System',
       description: 'High-flow exhaust system for better sound and performance',
       price: '€599',
-      image: 'https://via.placeholder.com/300x200?text=Exhaust+System',
+      icon: exhaustIcon,
       category: 'Exhaust',
     },
     {
@@ -40,7 +45,7 @@ const CarModifications = () => {
       name: 'Lowering Springs',
       description: 'Sport suspension lowering springs for improved handling',
       price: '€399',
-      image: 'https://via.placeholder.com/300x200?text=Lowering+Springs',
+      icon: suspensionIcon,
       category: 'Suspension',
     },
     {
@@ -48,7 +53,7 @@ const CarModifications = () => {
       name: 'Cold Air Intake',
       description: 'Improved air flow for better engine performance',
       price: '€199',
-      image: 'https://via.placeholder.com/300x200?text=Cold+Air+Intake',
+      icon: engineIcon,
       category: 'Engine',
     },
     {
@@ -56,7 +61,7 @@ const CarModifications = () => {
       name: 'Sport Brake Kit',
       description: 'Upgraded brake system for better stopping power',
       price: '€899',
-      image: 'https://via.placeholder.com/300x200?text=Brake+Kit',
+      icon: brakesIcon,
       category: 'Brakes',
     },
     {
@@ -64,7 +69,7 @@ const CarModifications = () => {
       name: 'Wheel Spacers',
       description: 'Improve stance and handling with wheel spacers',
       price: '€149',
-      image: 'https://via.placeholder.com/300x200?text=Wheel+Spacers',
+      icon: wheelsIcon,
       category: 'Wheels',
     },
   ];
@@ -112,12 +117,26 @@ const CarModifications = () => {
                 },
               }}
             >
-              <CardMedia
-                component="img"
-                height="200"
-                image={mod.image}
-                alt={mod.name}
-              />
+              <Box
+                sx={{
+                  p: 3,
+                  display: 'flex',
+                  justifyContent: 'center',
+                  alignItems: 'center',
+                  backgroundColor: 'primary.main',
+                  color: 'white',
+                }}
+              >
+                <img
+                  src={mod.icon}
+                  alt={mod.name}
+                  style={{
+                    width: '64px',
+                    height: '64px',
+                    filter: 'brightness(0) invert(1)',
+                  }}
+                />
+              </Box>
               <CardContent sx={{ flexGrow: 1 }}>
                 <Typography gutterBottom variant="h5" component="h2">
                   {mod.name}