feat: build production-ready wtr weather PWA

components/weather/favorites-section.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import { Heart } from "lucide-react";
+import { useWeatherStore } from "@/lib/store";
+import type { SynopStation } from "@/types/imgw";
+import { StationCard } from "@/components/weather/station-card";
+
+export function FavoritesSection({ stations }: { stations: SynopStation[] }) {
+  const favoriteIds = useWeatherStore((state) => state.favorites);
+  const favorites = stations.filter((station) => favoriteIds.includes(station.id));
+  if (!favorites.length) return (
+    <section className="glass-subtle rounded-[1.75rem] p-5">
+      <div className="flex items-center gap-2 text-sm font-semibold"><Heart className="size-4 text-rose-500" />Ulubione lokalizacje</div>
+      <p className="mt-2 text-sm text-slate-600 dark:text-slate-300">Dodaj stacje do ulubionych, aby mieć ich odczyty pod ręką.</p>
+    </section>
+  );
+  return (
+    <section className="space-y-3">
+      <div className="flex items-center gap-2 text-sm font-semibold"><Heart className="size-4 fill-rose-500 text-rose-500" />Ulubione lokalizacje</div>
+      <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">{favorites.map((station, index) => <StationCard key={station.id} station={station} index={index} />)}</div>
+    </section>
+  );
+}