+
+
{city.name}
+
+
+
+
+ {rank !== null && (
+ #{rank} for valgt aktivitet
+ )}
+
+ {feedback}
+ {weather && (
+
+
+
- Temperatur
+ - {weather.current.temperature_2m} °C
+ - Værtype
+ - {weatherType}
+
+
+
+
- Nedbør:
+ - {weather.current.precipitation} mm
+
+
+
- Vind:
+ - {weather.current.wind_speed_10m} m/s
+
+
+ )}
+
+
+
+
+
+ );
+}
diff --git a/web/src/components/WeatherList/WeatherList.css b/web/src/components/WeatherList/WeatherList.css
new file mode 100644
index 0000000..4d6b646
--- /dev/null
+++ b/web/src/components/WeatherList/WeatherList.css
@@ -0,0 +1,9 @@
+.weather-list {
+ display: grid;
+ grid-template-columns: repeat(
+ auto-fit,
+ minmax(var(--weather-card-min-width), 1fr)
+ );
+
+ gap: var(--space-md);
+}
diff --git a/web/src/components/WeatherList/WeatherList.tsx b/web/src/components/WeatherList/WeatherList.tsx
new file mode 100644
index 0000000..3d1ccbe
--- /dev/null
+++ b/web/src/components/WeatherList/WeatherList.tsx
@@ -0,0 +1,71 @@
+import type { ReactNode } from 'react';
+import type { City } from '../../features/weather/cities';
+import type { CityWeather } from '../../features/weather/weather';
+import { WeatherCard } from '../WeatherCard/WeatherCard';
+import './WeatherList.css';
+
+export type WeatherListItem = {
+ city: City;
+ weather: CityWeather | null;
+ feedback: ReactNode;
+ isFavorite: boolean;
+ score: number;
+ rank: number | null;
+};
+
+export type WeatherListProps = {
+ items: WeatherListItem[];
+ selectedCity: City;
+ onCitySelect: (city: City) => void;
+ onOpenDetails: (city: City) => void;
+ onToggleFavorite: (city: City) => void;
+ expandedCityId: City['id'] | null;
+ details: ReactNode;
+};
+
+export function WeatherList({
+ items,
+ selectedCity,
+ onCitySelect,
+ onOpenDetails,
+ onToggleFavorite,
+ expandedCityId,
+ details,
+}: WeatherListProps) {
+ return (
+