40 lines
2.9 KiB
TypeScript
40 lines
2.9 KiB
TypeScript
"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">{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={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">{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">{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">{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">{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>
|
|
);
|
|
}
|