82 lines
2.7 KiB
TypeScript
82 lines
2.7 KiB
TypeScript
"use client";
|
|
|
|
import { CloudSun, Droplets, Gauge, Navigation, Thermometer, Umbrella, Wind } from "lucide-react";
|
|
import {
|
|
calculateFeelsLike,
|
|
formatHumidity,
|
|
formatPressure,
|
|
formatRainfall,
|
|
formatTemperature,
|
|
formatWind,
|
|
getWindDirection,
|
|
} from "@/lib/weather-utils";
|
|
import type { SynopStation } from "@/types/imgw";
|
|
import { MetricCard } from "@/components/weather/metric-card";
|
|
import { useI18n } from "@/lib/i18n";
|
|
import { useWeatherStore } from "@/lib/store";
|
|
|
|
export function CurrentConditionsCard({ station }: { station: SynopStation }) {
|
|
const { language, t } = useI18n();
|
|
const temperatureUnit = useWeatherStore((state) => state.temperatureUnit);
|
|
const windSpeedUnit = useWeatherStore((state) => state.windSpeedUnit);
|
|
const precipitationUnit = useWeatherStore((state) => state.precipitationUnit);
|
|
const pressureUnit = useWeatherStore((state) => state.pressureUnit);
|
|
const feelsLike = calculateFeelsLike(station.temperature, station.humidity, station.windSpeed);
|
|
const metrics = [
|
|
{
|
|
icon: Thermometer,
|
|
label: t("weather.feelsLike"),
|
|
value: formatTemperature(feelsLike, language, temperatureUnit),
|
|
detail: t("weather.feelsLikeDetail"),
|
|
},
|
|
{
|
|
icon: Droplets,
|
|
label: t("weather.humidity"),
|
|
value: formatHumidity(station.humidity, language),
|
|
detail: t("weather.humidityDetail"),
|
|
},
|
|
{
|
|
icon: Gauge,
|
|
label: t("weather.pressure"),
|
|
value: formatPressure(station.pressure, language, pressureUnit),
|
|
detail: t("weather.pressureDetail"),
|
|
},
|
|
{
|
|
icon: Wind,
|
|
label: t("weather.windSpeed"),
|
|
value: formatWind(station.windSpeed, null, language, windSpeedUnit),
|
|
detail: t("weather.windSpeedDetail"),
|
|
},
|
|
{
|
|
icon: Navigation,
|
|
label: t("weather.windDirection"),
|
|
value:
|
|
station.windDirection === null
|
|
? t("common.noData")
|
|
: `${station.windDirection}° ${getWindDirection(station.windDirection)}`,
|
|
detail: t("weather.windDirectionDetail"),
|
|
},
|
|
{
|
|
icon: Umbrella,
|
|
label: t("weather.rainfallTotal"),
|
|
value: formatRainfall(station.rainfall, language, precipitationUnit),
|
|
detail: t("weather.rainfallDetail"),
|
|
},
|
|
{
|
|
icon: CloudSun,
|
|
label: t("weather.airTemperature"),
|
|
value: formatTemperature(station.temperature, language, temperatureUnit),
|
|
detail: t("weather.temperatureDetail"),
|
|
},
|
|
];
|
|
return (
|
|
<div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
|
|
{metrics.map((metric, index) => (
|
|
<MetricCard {...metric} index={index} key={metric.label} />
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export const WeatherDetailsGrid = CurrentConditionsCard;
|