fix: use IMGW Hybrid for current weather
This commit is contained in:
@@ -15,9 +15,16 @@ const stars = Array.from({ length: 16 }, (_, index) => ({
|
||||
delay: (index % 6) * 0.35,
|
||||
}));
|
||||
|
||||
export function WeatherEffects({ station, mood }: { station: SynopStation; mood: WeatherMood }) {
|
||||
const rainDrops = Array.from({ length: 22 }, (_, index) => ({
|
||||
left: `${(index * 43 + 7) % 101}%`,
|
||||
delay: (index % 9) * 0.18,
|
||||
duration: 0.8 + (index % 4) * 0.14,
|
||||
}));
|
||||
|
||||
export function WeatherEffects({ station, mood, precipitation10m, thunderstorm = false }: { station: SynopStation; mood: WeatherMood; precipitation10m?: number | null; thunderstorm?: boolean }) {
|
||||
const reduceMotion = useReducedMotion();
|
||||
const isWindy = (station.windSpeed ?? 0) >= 8;
|
||||
const isRaining = (precipitation10m ?? 0) > 0;
|
||||
|
||||
return (
|
||||
<div aria-hidden="true" className="pointer-events-none absolute inset-0 z-[1] overflow-hidden">
|
||||
@@ -63,6 +70,23 @@ export function WeatherEffects({ station, mood }: { station: SynopStation; mood:
|
||||
style={{ top: line.top, width: line.width }}
|
||||
/>
|
||||
))}
|
||||
{isRaining && rainDrops.map((drop, index) => (
|
||||
<motion.span
|
||||
key={`rain-${index}`}
|
||||
initial={{ y: "-12vh", opacity: 0 }}
|
||||
animate={reduceMotion ? { opacity: 0.36 } : { y: ["-12vh", "115vh"], opacity: [0, 0.55, 0] }}
|
||||
transition={{ duration: drop.duration, delay: drop.delay, repeat: Infinity, ease: "linear" }}
|
||||
className="absolute -top-8 h-14 w-px rotate-[8deg] rounded-full bg-gradient-to-b from-transparent via-white/55 to-transparent blur-[0.35px]"
|
||||
style={{ left: drop.left }}
|
||||
/>
|
||||
))}
|
||||
{thunderstorm && (
|
||||
<motion.div
|
||||
animate={reduceMotion ? { opacity: 0.12 } : { opacity: [0, 0, 0.34, 0, 0.18, 0] }}
|
||||
transition={{ duration: 6, repeat: Infinity, repeatDelay: 2.5 }}
|
||||
className="absolute inset-0 bg-white"
|
||||
/>
|
||||
)}
|
||||
{mood === "cold" && (
|
||||
<div className="absolute inset-x-0 bottom-0 h-28 bg-gradient-to-t from-cyan-100/20 to-transparent" />
|
||||
)}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -1,8 +1,9 @@
|
||||
import { Cloud, CloudSun, MoonStar, Snowflake, ThermometerSun, Wind } from "lucide-react";
|
||||
import { Cloud, CloudLightning, CloudRain, CloudSun, MoonStar, Snowflake, ThermometerSun, Wind } from "lucide-react";
|
||||
import type { WeatherMood } from "@/types/imgw";
|
||||
import type { CurrentWeatherCondition } from "@/types/imgw-current";
|
||||
|
||||
export function WeatherIcon({ mood, className = "" }: { mood: WeatherMood; className?: string }) {
|
||||
const Icon = {
|
||||
export function WeatherIcon({ mood, condition, className = "" }: { mood: WeatherMood; condition?: CurrentWeatherCondition; className?: string }) {
|
||||
const Icon = condition === "thunderstorm" ? CloudLightning : condition === "rain" ? CloudRain : condition === "snow" ? Snowflake : {
|
||||
warm: ThermometerSun,
|
||||
cloudy: Cloud,
|
||||
wind: Wind,
|
||||
|
||||
Reference in New Issue
Block a user