feat: build production-ready wtr weather PWA

components/weather/station-search.tsx

@@ -0,0 +1,35 @@
+import { Search, SlidersHorizontal } from "lucide-react";
+import type { StationFilter, StationSort } from "@/components/weather/stations-explorer";
+
+export function StationSearch({ query, onQueryChange, sort, onSortChange, filter, onFilterChange }: { query: string; onQueryChange: (value: string) => void; sort: StationSort; onSortChange: (value: StationSort) => void; filter: StationFilter; onFilterChange: (value: StationFilter) => void }) {
+  return (
+    <div className="glass grid gap-3 rounded-[1.75rem] p-3 sm:grid-cols-[1fr_auto_auto]">
+      <label className="relative">
+        <span className="sr-only">Szukaj stacji synoptycznej</span>
+        <Search className="pointer-events-none absolute left-3.5 top-1/2 size-4 -translate-y-1/2 text-slate-500" />
+        <input value={query} onChange={(event) => onQueryChange(event.target.value)} placeholder="Szukaj stacji IMGW…" className="w-full rounded-2xl border border-white/40 bg-white/45 py-3 pl-10 pr-4 text-sm placeholder:text-slate-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-500 dark:border-white/10 dark:bg-white/5" />
+      </label>
+      <label className="relative">
+        <span className="sr-only">Sortowanie stacji</span>
+        <select value={sort} onChange={(event) => onSortChange(event.target.value as StationSort)} className="w-full appearance-none rounded-2xl border border-white/40 bg-white/45 py-3 pl-4 pr-9 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-500 dark:border-white/10 dark:bg-slate-900/60">
+          <option value="alphabetical">Alfabetycznie</option>
+          <option value="temperature-desc">Temperatura: najwyższa</option>
+          <option value="temperature-asc">Temperatura: najniższa</option>
+          <option value="humidity-desc">Wilgotność: najwyższa</option>
+          <option value="pressure-desc">Ciśnienie: najwyższe</option>
+        </select>
+        <SlidersHorizontal className="pointer-events-none absolute right-3 top-1/2 size-4 -translate-y-1/2 text-slate-500" />
+      </label>
+      <label>
+        <span className="sr-only">Filtr stacji</span>
+        <select value={filter} onChange={(event) => onFilterChange(event.target.value as StationFilter)} className="w-full rounded-2xl border border-white/40 bg-white/45 px-4 py-3 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-500 dark:border-white/10 dark:bg-slate-900/60">
+          <option value="all">Wszystkie stacje</option>
+          <option value="warmest">Najcieplejsze</option>
+          <option value="coldest">Najzimniejsze</option>
+          <option value="windy">Największy wiatr</option>
+          <option value="rainy">Największy opad</option>
+        </select>
+      </label>
+    </div>
+  );
+}