feat: build production-ready wtr weather PWA

components/weather/current-conditions-card.tsx

@@ -0,0 +1,24 @@
+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";
+
+export function CurrentConditionsCard({ station }: { station: SynopStation }) {
+  const feelsLike = calculateFeelsLike(station.temperature, station.humidity, station.windSpeed);
+  const metrics = [
+    { icon: Thermometer, label: "Odczuwalna", value: formatTemperature(feelsLike), detail: "Wartość obliczana, gdy warunki na to pozwalają" },
+    { icon: Droplets, label: "Wilgotność", value: formatHumidity(station.humidity), detail: "Wilgotność względna powietrza" },
+    { icon: Gauge, label: "Ciśnienie", value: formatPressure(station.pressure), detail: "Ciśnienie atmosferyczne" },
+    { icon: Wind, label: "Prędkość wiatru", value: formatWind(station.windSpeed), detail: "Bieżący odczyt IMGW" },
+    { icon: Navigation, label: "Kierunek wiatru", value: station.windDirection === null ? "Brak danych" : `${station.windDirection}° ${getWindDirection(station.windDirection)}`, detail: "Kierunek napływu wiatru" },
+    { icon: Umbrella, label: "Suma opadu", value: formatRainfall(station.rainfall), detail: "Suma opadu z pomiaru IMGW" },
+    { icon: CloudSun, label: "Temperatura", value: formatTemperature(station.temperature), detail: "Temperatura powietrza" },
+  ];
+  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;