feat: build production-ready wtr weather PWA

components/hydro/hydro-station-card.tsx

@@ -0,0 +1,37 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { Activity, Droplets, MapPin, Thermometer } from "lucide-react";
+import type { HydroStation } from "@/types/imgw";
+import { formatDateTime, formatFlow, formatTemperature, formatWaterLevel } from "@/lib/weather-utils";
+import { Card } from "@/components/ui/card";
+
+export function HydroStationCard({ station, index = 0 }: { station: HydroStation; index?: number }) {
+  return (
+    <motion.article initial={{ opacity: 0, y: 10 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: Math.min(index * 0.02, 0.3), duration: 0.3 }}>
+      <Card className="h-full p-4 transition duration-300 hover:-translate-y-1 hover:bg-white/60 dark:hover:bg-slate-900/45">
+        <div>
+          <div>
+            <h2 className="font-semibold tracking-tight">{station.name}</h2>
+            <p className="mt-1 flex items-center gap-1 text-xs text-slate-500 dark:text-slate-400"><MapPin className="size-3" />{station.river ?? "Rzeka: brak danych"}{station.province ? ` · ${station.province}` : ""}</p>
+          </div>
+        </div>
+        <div className="mt-5 grid grid-cols-3 gap-2">
+          <HydroMetric icon={Droplets} label="Poziom" value={formatWaterLevel(station.waterLevel)} />
+          <HydroMetric icon={Thermometer} label="Woda" value={formatTemperature(station.waterTemperature)} />
+          <HydroMetric icon={Activity} label="Przepływ" value={formatFlow(station.flow)} />
+        </div>
+        <p className="mt-4 text-[0.7rem] text-slate-500 dark:text-slate-400">Pomiar poziomu: {formatDateTime(station.waterLevelMeasuredAt)}</p>
+      </Card>
+    </motion.article>
+  );
+}
+
+function HydroMetric({ icon: Icon, label, value }: { icon: typeof Droplets; label: string; value: string }) {
+  return (
+    <div className="rounded-2xl bg-white/35 p-2.5 dark:bg-white/5">
+      <p className="flex items-center gap-1 text-[0.65rem] text-slate-500 dark:text-slate-400"><Icon className="size-3" />{label}</p>
+      <p className="mt-1.5 truncate text-xs font-semibold" title={value}>{value}</p>
+    </div>
+  );
+}