zv/wtr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add Polish and English language switcher

Browse Source
This commit is contained in:
zv
2026-06-01 18:54:08 +02:00
parent 840555f4f5
commit 6c2e731c60
29 changed files with 531 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
components/weather/station-search.tsx
View File

@@ -1,33 +1,37 @@
"use client";
import { Search, SlidersHorizontal } from "lucide-react";
import type { StationFilter, StationSort } from "@/components/weather/stations-explorer";
import { useI18n } from "@/lib/i18n";
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 }) {
const { t } = useI18n();
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>
<span className="sr-only">{t("stations.searchLabel")}</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" />
<input value={query} onChange={(event) => onQueryChange(event.target.value)} placeholder={t("stations.searchPlaceholder")} 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>
<span className="sr-only">{t("stations.sortLabel")}</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>
<option value="alphabetical">{t("stations.sortAlphabetical")}</option>
<option value="temperature-desc">{t("stations.sortTemperatureDesc")}</option>
<option value="temperature-asc">{t("stations.sortTemperatureAsc")}</option>
<option value="humidity-desc">{t("stations.sortHumidityDesc")}</option>
<option value="pressure-desc">{t("stations.sortPressureDesc")}</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>
<span className="sr-only">{t("stations.filterLabel")}</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>
<option value="all">{t("stations.filterAll")}</option>
<option value="warmest">{t("stations.filterWarmest")}</option>
<option value="coldest">{t("stations.filterColdest")}</option>
<option value="windy">{t("stations.filterWindy")}</option>
<option value="rainy">{t("stations.filterRainy")}</option>
</select>
</label>
</div>