Feat/mer emojis

src/App.css

@@ -181,3 +181,23 @@
     border-right-color: var(--border);
   }
 }
+
+.list-item {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  background-color: #bcebff;
+  color: #000000;
+  padding: 10px;
+  border-radius: 15px;
+  width: 80%;
+  margin-right: 5px;
+  border: 1px solid #000000;
+}
+
+@media (max-width: 512px) {
+  .list-item {
+    flex-direction: column;
+    height: auto;
+  }
+}

src/components/listItem.tsx

@@ -1,27 +1,16 @@
+import "../App.css"
+
 type cityWeather = {
   name?: string
   temperature?: number
   precipitation?: number
-  nextDays?: { time: string; temperature: number | undefined }[]
+  nextDays?: { time: string; temperature?: number; precipitation?: number }[]
 }
 
 const listItem = ({ city: item }: { city: cityWeather }) => {
   return (
-    <li
-      key={item.name}
-      style={{
-        display: "flex",
-        flexDirection: "row",
-        justifyContent: "space-between",
-        backgroundColor: "#bcebff",
-        color: "#000000",
-        padding: "10px",
-        borderRadius: "15px",
-        width: "80%",
-        marginRight: "5px",
-      }}
-    >
-      <span style={{ display: "flex" }}>
+    <li key={item.name} className="list-item">
+      <span style={{ display: "flex", flexDirection: "row" }}>
         {item.name}:
         <span>
           {typeof item.precipitation === "number" && item.precipitation > 0.6
@@ -35,9 +24,19 @@ const listItem = ({ city: item }: { city: cityWeather }) => {
         </p>
       </span>
 
-      <div style={{ display: "flex", flexDirection: "row", gap: "10px" }}>
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "row",
+          gap: "10px",
+          alignSelf: "end",
+        }}
+      >
         {item.nextDays?.map((day) => (
-          <span key={day.time} style={{ color: "#ff3232" }}>
+          <span key={day.time} style={{ color: "#ff3232", marginRight: "8px" }}>
+            {typeof day.precipitation === "number" && day.precipitation > 0.6
+              ? "🌧️"
+              : "⛅"}
             {typeof day.temperature === "number"
               ? `${day.temperature.toFixed()}°`
               : "—"}

src/components/location-list.tsx

@@ -35,6 +35,7 @@ const getNextDays = (data?: WeatherApiResponse) => {
     })
     .map((entry) => ({
       time: entry.time,
+      precipitation: entry.data.next_6_hours?.details?.precipitation_amount,
       temperature: entry.data.instant.details?.air_temperature,
     }))