Feat/stjerner

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,25 @@
+import "../App.css"
+import StarButton from "./starButton"
+
 type cityWeather = {
-  name?: string
+  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",
+          gap: "10px",
+          alignItems: "center",
+        }}
+      >
+        <StarButton cityName={item.name} />
         {item.name}:
         <span>
           {typeof item.precipitation === "number" && item.precipitation > 0.6
@@ -35,9 +33,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,
     }))
 

src/components/starButton.tsx

@@ -0,0 +1,21 @@
+import { useAppStorage } from "../hooks/useStorage"
+
+const StarButton = ({ cityName }: { cityName: string }) => {
+  const { storage, toggleStarredLocation } = useAppStorage()
+
+  const handleClick = () => {
+    toggleStarredLocation(cityName)
+  }
+
+  return (
+    <button onClick={handleClick}>
+      {storage.starredLocations.includes(cityName) ? (
+        <span style={{ color: "#ffee00" }}>⭐</span>
+      ) : (
+        <span style={{ color: "#000000" }}>☆</span>
+      )}
+    </button>
+  )
+}
+
+export default StarButton

src/hooks/fetchWeather/types.ts

@@ -176,7 +176,7 @@ export type METJSONForecast = {
 }
 
 export type City = {
-  name?: string
+  name: string
   lat: number
   lon: number
   alt?: number

src/index.css

@@ -94,3 +94,9 @@ ul {
   list-style-type: none; /* Removes the dots */
   padding: 0; /* Removes default left indentation */
 }
+
+button {
+  border: none;
+  background: transparent;
+  cursor: pointer;
+}