feat: build production-ready wtr weather PWA

2026-06-01 18:43:56 +02:00
commit 840555f4f5
60 changed files with 9052 additions and 0 deletions
--- a/components/weather/weather-hero.tsx
+++ b/components/weather/weather-hero.tsx
@@ -0,0 +1,70 @@
+"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";
+
+export function WeatherHero({ station }: { station: SynopStation }) {
+  const mood = getWeatherMoodFromData(station);
+  const feelsLike = calculateFeelsLike(station.temperature, station.humidity, station.windSpeed);
+  const metrics = [
+    { icon: Droplets, label: "Wilgotność", value: formatHumidity(station.humidity) },
+    { icon: Wind, label: "Wiatr", value: formatWind(station.windSpeed) },
+    { icon: Umbrella, label: "Opad", value: formatRainfall(station.rainfall) },
+    { icon: Gauge, label: "Ciśnienie", value: formatPressure(station.pressure) },
+  ];
+
+  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`}
+    >
+      <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">
+        <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" />{station.name}</span>
+        </div>
+        <div className="mt-8 flex items-end justify-between gap-3 sm:mt-10">
+          <div>
+            <div className="text-[5.8rem] font-extralight leading-[0.85] tracking-[-0.11em] sm:text-[8rem]">
+              {formatTemperature(station.temperature)}
+            </div>
+            <p className="mt-5 text-xl font-medium tracking-tight sm:text-2xl">{getWeatherDescription(station)}</p>
+            <p className="mt-1 text-sm text-white/75">Odczuwalna {formatTemperature(feelsLike)} · pomiar {formatDateTime(station.measuredAt)}</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)` }} />
+            Kierunek wiatru: {station.windDirection}°
+          </p>
+        )}
+      </div>
+    </motion.section>
+  );
+}