49 lines
2.9 KiB
TypeScript
49 lines
2.9 KiB
TypeScript
"use client";
|
|
|
|
import { useMemo, useState } from "react";
|
|
import { Search, Waves } from "lucide-react";
|
|
import { useHydroStations } from "@/hooks/use-hydro";
|
|
import { HydroStationCard } from "@/components/hydro/hydro-station-card";
|
|
import { Button } from "@/components/ui/button";
|
|
import { PageLoadingSkeleton } from "@/components/states/loading-skeleton";
|
|
import { ErrorState } from "@/components/states/error-state";
|
|
import { EmptyState } from "@/components/states/empty-state";
|
|
import { useI18n } from "@/lib/i18n";
|
|
|
|
const PAGE_SIZE = 48;
|
|
|
|
export function HydroPage() {
|
|
const { locale, t } = useI18n();
|
|
const { data: stations, isPending, isError, refetch } = useHydroStations();
|
|
const [query, setQuery] = useState("");
|
|
const [visibleCount, setVisibleCount] = useState(PAGE_SIZE);
|
|
const filteredStations = useMemo(() => (stations ?? []).filter((station) => {
|
|
const haystack = `${station.name} ${station.river ?? ""} ${station.province ?? ""}`.toLocaleLowerCase(locale);
|
|
return haystack.includes(query.trim().toLocaleLowerCase(locale));
|
|
}), [locale, query, stations]);
|
|
|
|
if (isPending) return <PageLoadingSkeleton />;
|
|
if (isError) return <ErrorState onRetry={() => refetch()} description={t("hydro.error")} />;
|
|
return (
|
|
<div className="space-y-5">
|
|
<div>
|
|
<p className="section-kicker">{t("hydro.section")}</p>
|
|
<h1 className="mt-2 text-3xl font-semibold tracking-tight">{t("hydro.title")}</h1>
|
|
<p className="mt-2 max-w-2xl text-sm leading-6 text-muted">{t("hydro.description")}</p>
|
|
</div>
|
|
<label className="glass relative block rounded-panel p-3">
|
|
<span className="sr-only">{t("hydro.searchLabel")}</span>
|
|
<Search className="pointer-events-none absolute left-6 top-1/2 size-4 -translate-y-1/2 text-muted" />
|
|
<input value={query} onChange={(event) => { setQuery(event.target.value); setVisibleCount(PAGE_SIZE); }} placeholder={t("hydro.searchPlaceholder")} className="w-full rounded-card border border-border/70 bg-surface-raised/80 py-3 pl-10 pr-4 text-sm placeholder:text-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent" />
|
|
</label>
|
|
<p className="text-xs text-muted">{t("hydro.results", { total: filteredStations.length, visible: Math.min(visibleCount, filteredStations.length) })}</p>
|
|
{!filteredStations.length ? <EmptyState icon={Waves} title={t("stations.emptyTitle")} description={t("hydro.emptyDescription")} /> : (
|
|
<>
|
|
<div className="grid gap-3 md:grid-cols-2 xl:grid-cols-3">{filteredStations.slice(0, visibleCount).map((station, index) => <HydroStationCard key={station.id} station={station} index={index} />)}</div>
|
|
{visibleCount < filteredStations.length && <div className="flex justify-center pt-2"><Button variant="glass" onClick={() => setVisibleCount((count) => count + PAGE_SIZE)}>{t("hydro.more")}</Button></div>}
|
|
</>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|