zv/wtr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: use IMGW Hybrid for current weather

Browse Source
This commit is contained in:
zv
2026-06-02 16:18:10 +02:00
parent 22b8969379
commit fe73bc23ef
13 changed files with 267 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
components/weather/weather-hero.tsx
View File

@@ -15,19 +15,30 @@ import {
moodGradient,
} from "@/lib/weather-utils";
import type { SynopStation } from "@/types/imgw";
import type { ImgwCurrentWeather } from "@/types/imgw-current";
import { WeatherIcon } from "@/components/weather/weather-icon";
import { WeatherEffects } from "@/components/weather/weather-effects";
import { useI18n } from "@/lib/i18n";
export function WeatherHero({ station, locationName, distanceKm }: { station: SynopStation; locationName?: string; distanceKm?: number }) {
export function WeatherHero({ station, currentWeather, locationName, distanceKm }: { station: SynopStation; currentWeather?: ImgwCurrentWeather | null; locationName?: string; distanceKm?: number }) {
const { language, t } = useI18n();
const mood = getWeatherMoodFromData(station);
const feelsLike = calculateFeelsLike(station.temperature, station.humidity, station.windSpeed);
const displayedStation = currentWeather ? {
...station,
measuredAt: currentWeather.measuredAt,
temperature: currentWeather.temperature,
windSpeed: currentWeather.windSpeed,
windDirection: currentWeather.windDirection,
humidity: currentWeather.humidity,
pressure: currentWeather.pressure,
rainfall: currentWeather.precipitation10m,
} : station;
const mood = getWeatherMoodFromData(displayedStation);
const feelsLike = currentWeather?.feelsLike ?? calculateFeelsLike(displayedStation.temperature, displayedStation.humidity, displayedStation.windSpeed);
const metrics = [
{ icon: Droplets, label: t("weather.humidity"), value: formatHumidity(station.humidity, language) },
{ icon: Wind, label: t("weather.wind"), value: formatWind(station.windSpeed, null, language) },
{ icon: Umbrella, label: t("weather.rainfallTotal"), value: formatRainfall(station.rainfall, language) },
{ icon: Gauge, label: t("weather.pressure"), value: formatPressure(station.pressure, language) },
{ icon: Droplets, label: t("weather.humidity"), value: formatHumidity(displayedStation.humidity, language) },
{ icon: Wind, label: t("weather.wind"), value: formatWind(displayedStation.windSpeed, null, language) },
{ icon: Umbrella, label: currentWeather ? t("weather.rainfall10m") : t("weather.rainfallTotal"), value: formatRainfall(displayedStation.rainfall, language) },
{ icon: Gauge, label: t("weather.pressure"), value: formatPressure(displayedStation.pressure, language) },
];
return (
@@ -37,7 +48,7 @@ export function WeatherHero({ station, locationName, distanceKm }: { station: Sy
transition={{ duration: 0.55, ease: "easeOut" }}
className={`relative isolate overflow-hidden rounded-[2rem] bg-gradient-to-br ${moodGradient(mood)} px-5 py-6 text-white shadow-[0_24px_75px_rgba(15,23,42,0.24)] sm:px-8 sm:py-8 lg:px-10`}
>
<WeatherEffects station={station} mood={mood} />
<WeatherEffects station={displayedStation} mood={mood} precipitation10m={currentWeather?.precipitation10m} thunderstorm={currentWeather?.condition === "thunderstorm"} />
<div className="absolute -right-20 -top-20 size-72 rounded-full bg-white/15 blur-3xl" />
<div className="absolute -bottom-24 -left-16 size-72 rounded-full bg-cyan-200/15 blur-3xl" />
<div className="relative z-10">
@@ -48,12 +59,12 @@ export function WeatherHero({ station, locationName, distanceKm }: { station: Sy
<div className="mt-8 flex items-end justify-between gap-3 sm:mt-10">
<div>
<div className="text-[5.8rem] font-medium leading-[0.85] tracking-[-0.11em] drop-shadow-[0_10px_24px_rgba(15,23,42,0.16)] sm:text-[8rem]">
{formatTemperature(station.temperature, language)}
{formatTemperature(displayedStation.temperature, language)}
</div>
<p className="mt-5 text-xl font-medium tracking-tight sm:text-2xl">{getWeatherDescription(station, language)}</p>
<p className="mt-1 text-sm text-white/75">{t("weather.feelsLike")} {formatTemperature(feelsLike, language)} · {t("weather.measurement")} {formatDateTime(station.measuredAt, language)}</p>
<p className="mt-5 text-xl font-medium tracking-tight sm:text-2xl">{getWeatherDescription(displayedStation, language, currentWeather?.condition)}</p>
<p className="mt-1 text-sm text-white/75">{t("weather.feelsLike")} {formatTemperature(feelsLike, language)} · {t("weather.measurement")} {formatDateTime(displayedStation.measuredAt, language)}{currentWeather ? ` · ${t("weather.hybridAnalysis")}` : ""}</p>
</div>
<WeatherIcon mood={mood} className="mb-4 size-20 text-white/80 sm:size-28" />
<WeatherIcon mood={mood} condition={currentWeather?.condition} className="mb-4 size-20 text-white/80 sm:size-28" />
</div>
<div className="mt-8 grid grid-cols-2 gap-2.5 sm:mt-10 lg:grid-cols-4">
{metrics.map(({ icon: Icon, label, value }) => (
@@ -63,10 +74,10 @@ export function WeatherHero({ station, locationName, distanceKm }: { station: Sy
</div>
))}
</div>
{station.windDirection !== null && (
{displayedStation.windDirection !== null && (
<p className="mt-4 flex items-center gap-1.5 text-xs text-white/70">
<Navigation className="size-3.5" style={{ transform: `rotate(${station.windDirection}deg)` }} />
{t("weather.windDirection")}: {station.windDirection}°
<Navigation className="size-3.5" style={{ transform: `rotate(${displayedStation.windDirection}deg)` }} />
{t("weather.windDirection")}: {displayedStation.windDirection}°
</p>
)}
</div>