feat: build production-ready wtr weather PWA

components/weather/station-card.tsx

@@ -0,0 +1,44 @@
+"use client";
+
+import Link from "next/link";
+import { motion } from "framer-motion";
+import { Droplets, Gauge, Heart, Wind } from "lucide-react";
+import { useWeatherStore } from "@/lib/store";
+import { formatHumidity, formatPressure, formatTemperature, getWeatherMoodFromData } from "@/lib/weather-utils";
+import type { SynopStation } from "@/types/imgw";
+import { Card } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { WeatherIcon } from "@/components/weather/weather-icon";
+import { cn } from "@/lib/utils";
+
+export function StationCard({ station, index = 0 }: { station: SynopStation; index?: number }) {
+  const favorites = useWeatherStore((state) => state.favorites);
+  const toggleFavorite = useWeatherStore((state) => state.toggleFavorite);
+  const selectStation = useWeatherStore((state) => state.selectStation);
+  const favorite = favorites.includes(station.id);
+  const mood = getWeatherMoodFromData(station);
+  const compactWind = station.windSpeed === null ? "—" : `${station.windSpeed.toFixed(1)} m/s`;
+  return (
+    <motion.div initial={{ opacity: 0, y: 10 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: Math.min(index * 0.025, 0.3), duration: 0.3 }}>
+      <Card className="group relative h-full overflow-hidden p-4 transition duration-300 hover:-translate-y-1 hover:bg-white/60 dark:hover:bg-slate-900/45">
+        <div className="flex items-start justify-between gap-2">
+          <Link href={`/station/${station.id}`} onClick={() => selectStation(station.id)} className="min-w-0 flex-1 rounded-lg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-500">
+            <p className="truncate text-sm font-semibold">{station.name}</p>
+            <p className="mt-3 text-4xl font-light tracking-[-0.08em]">{formatTemperature(station.temperature)}</p>
+          </Link>
+          <div className="flex flex-col items-end gap-2">
+            <WeatherIcon mood={mood} className="size-9 text-sky-600 dark:text-sky-300" />
+            <Button variant="ghost" className="size-8 p-0" aria-label={favorite ? `Usuń ${station.name} z ulubionych` : `Dodaj ${station.name} do ulubionych`} onClick={() => toggleFavorite(station.id)}>
+              <Heart className={cn("size-4", favorite && "fill-rose-500 text-rose-500")} />
+            </Button>
+          </div>
+        </div>
+        <Link href={`/station/${station.id}`} onClick={() => selectStation(station.id)} className="mt-4 grid grid-cols-3 gap-2 rounded-lg text-[0.68rem] text-slate-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-500 dark:text-slate-400">
+          <span className="flex items-center gap-1"><Droplets className="size-3" />{formatHumidity(station.humidity)}</span>
+          <span className="flex items-center gap-1"><Wind className="size-3" />{compactWind}</span>
+          <span className="flex items-center gap-1"><Gauge className="size-3" />{station.pressure === null ? "—" : formatPressure(station.pressure).split(" ")[0]}</span>
+        </Link>
+      </Card>
+    </motion.div>
+  );
+}