76 lines
3.9 KiB
TypeScript
76 lines
3.9 KiB
TypeScript
"use client";
|
|
|
|
import { motion } from "framer-motion";
|
|
import { Droplets, Gauge, MapPin, Navigation, Umbrella, Wind } from "lucide-react";
|
|
import {
|
|
calculateFeelsLike,
|
|
formatDateTime,
|
|
formatHumidity,
|
|
formatPressure,
|
|
formatRainfall,
|
|
formatTemperature,
|
|
formatWind,
|
|
getWeatherDescription,
|
|
getWeatherMoodFromData,
|
|
moodGradient,
|
|
} from "@/lib/weather-utils";
|
|
import type { SynopStation } from "@/types/imgw";
|
|
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 }) {
|
|
const { language, t } = useI18n();
|
|
const mood = getWeatherMoodFromData(station);
|
|
const feelsLike = calculateFeelsLike(station.temperature, station.humidity, station.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.rainfall"), value: formatRainfall(station.rainfall, language) },
|
|
{ icon: Gauge, label: t("weather.pressure"), value: formatPressure(station.pressure, language) },
|
|
];
|
|
|
|
return (
|
|
<motion.section
|
|
initial={{ opacity: 0, y: 18 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
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} />
|
|
<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">
|
|
<div className="flex flex-wrap items-center gap-3">
|
|
<span className="flex items-center gap-1.5 text-sm font-medium text-white/85"><MapPin className="size-4" />{locationName ?? station.name}</span>
|
|
{locationName && <span className="text-xs text-white/65">{t("location.heroSource", { station: station.name, distance: distanceKm ?? 0 })}</span>}
|
|
</div>
|
|
<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)}
|
|
</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>
|
|
</div>
|
|
<WeatherIcon mood={mood} 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 }) => (
|
|
<div key={label} className="rounded-2xl border border-white/20 bg-white/10 p-3.5 backdrop-blur-xl">
|
|
<div className="flex items-center gap-2 text-xs text-white/70"><Icon className="size-3.5" />{label}</div>
|
|
<p className="mt-2 text-base font-semibold">{value}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
{station.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}°
|
|
</p>
|
|
)}
|
|
</div>
|
|
</motion.section>
|
|
);
|
|
}
|