add Icons for precipitations

frontend/src/WeatherCard.css

@@ -1,55 +1,60 @@
 #WeatherCard {
-    background-color: var(--card-background, #ffffff);
-    border-radius: 10px;
-    padding: 2em;
-    box-shadow: 0 4px 6px var(--shadow-color, rgba(0, 0, 0, 0.1));
-    margin: 1.5rem 0;
-    width: 100%;
-    max-width: 100%;
-    text-align: left;
-    transition: transform 300ms, box-shadow 300ms;
-    overflow: hidden;
+  background-color: var(--card-background, #ffffff);
+  border-radius: 10px;
+  padding: 2em;
+  box-shadow: 0 4px 6px var(--shadow-color, rgba(0, 0, 0, 0.1));
+  margin: 1.5rem 0;
+  width: 100%;
+  max-width: 100%;
+  text-align: left;
+  transition: transform 300ms, box-shadow 300ms;
+  overflow: hidden;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  gap: 1.5rem;
+  font-size: 1.1rem;
+  color: var(--text-color, #333);
+}
+
+.grid-item {
+  background-color: #f7f7f7;
+  padding: 1.5em;
+  border-radius: 8px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  transition: background-color 300ms ease;
+}
+
+.grid-item .label {
+  font-weight: bold;
+  color: var(--primary-color, #0077cc);
+  margin-bottom: 0.5em;
+  display: block;
+  text-align: center;
+}
+
+.grid-item span {
+  font-size: 1.2rem;
+  color: #333;
+}
+
+@media (max-width: 768px) {
+  #WeatherCard {
+    padding: 1.5em;
   }
-  
+
   .grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-    gap: 1.5rem;
-    font-size: 1.1rem;
-    color: var(--text-color, #333);
+    grid-template-columns: 1fr;
   }
-  
+
   .grid-item {
-    background-color: #f7f7f7;
-    padding: 1.5em;
-    border-radius: 8px;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-    transition: background-color 300ms ease;
-  }
-
-  .grid-item .label {
-    font-weight: bold;
-    color: var(--primary-color, #0077cc);
-    margin-bottom: 0.5em;
-    display: block;
+    padding: 1.2em;
   }
+}
 
-  .grid-item span {
-    font-size: 1.2rem;
-    color: #333;
-  }
-
-  @media (max-width: 768px) {
-    #WeatherCard {
-      padding: 1.5em;
-    }
-
-    .grid {
-      grid-template-columns: 1fr;
-    }
-
-    .grid-item {
-      padding: 1.2em;
-    }
-  }
-
+img {
+  width: 6vw;
+  margin-right: 1vw;
+}

frontend/src/WeatherCard.jsx

@@ -27,10 +27,16 @@ const WeatherCard = ({ data }) => {
           <span className="label">Température:</span>
           <span>{temperature !== null ? `${temperature}°C` : "Non disponible"}</span>
         </div>
-        <div className="grid-item">
+        <div className="grid-item precipitation-container">
           <span className="label">Précipitation:</span>
+          {data?.meteo?.precipitation !== "Aucun" ?
+            <img visibility={data?.meteo?.precipitation == "Aucun" ? "hidden" : "visible"}
+              src={data?.meteo?.precipitation ? `../public/icons/${data.meteo.precipitation}.png` : "#"} 
+              alt={data?.meteo?.precipitation ? data.meteo.precipitation : "Image non disponible"} 
+            /> : null
+          } 
           <span>{data?.meteo?.precipitation ?? "Non disponible"}</span>
-        </div>
+        </div>        
         <div className="grid-item">
           <span className="label">Humidité:</span>
           <span>{data?.meteo?.humidity ?? "Non disponible"}</span>