65 lines
2.5 KiB
TypeScript
65 lines
2.5 KiB
TypeScript
"use client";
|
|
|
|
import { motion } from "framer-motion";
|
|
import { Activity, Droplets, MapPin, Thermometer } from "lucide-react";
|
|
import type { HydroStation } from "@/types/imgw";
|
|
import { formatDateTime, formatFlow, formatTemperature, formatWaterLevel } from "@/lib/weather-utils";
|
|
import { Card } from "@/components/ui/card";
|
|
import { useI18n } from "@/lib/i18n";
|
|
import { useWeatherStore } from "@/lib/store";
|
|
|
|
export function HydroStationCard({ station, index = 0 }: { station: HydroStation; index?: number }) {
|
|
const { language, t } = useI18n();
|
|
const temperatureUnit = useWeatherStore((state) => state.temperatureUnit);
|
|
return (
|
|
<motion.article
|
|
initial={{ opacity: 0, y: 10 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ delay: Math.min(index * 0.02, 0.3), duration: 0.3 }}
|
|
>
|
|
<Card className="h-full p-4 transition duration-300 hover:-translate-y-1 hover:bg-surface-raised/90">
|
|
<div>
|
|
<div>
|
|
<h2 className="font-semibold tracking-tight">{station.name}</h2>
|
|
<p className="mt-1 flex items-center gap-1 text-xs text-muted">
|
|
<MapPin className="size-3" />
|
|
{station.river ?? t("hydro.riverUnavailable")}
|
|
{station.province ? ` · ${station.province}` : ""}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="mt-5 grid grid-cols-3 gap-2">
|
|
<HydroMetric
|
|
icon={Droplets}
|
|
label={t("hydro.level")}
|
|
value={formatWaterLevel(station.waterLevel, language)}
|
|
/>
|
|
<HydroMetric
|
|
icon={Thermometer}
|
|
label={t("hydro.water")}
|
|
value={formatTemperature(station.waterTemperature, language, temperatureUnit)}
|
|
/>
|
|
<HydroMetric icon={Activity} label={t("hydro.flow")} value={formatFlow(station.flow, language)} />
|
|
</div>
|
|
<p className="mt-4 text-[0.7rem] text-muted">
|
|
{t("hydro.levelMeasurement", { date: formatDateTime(station.waterLevelMeasuredAt, language) })}
|
|
</p>
|
|
</Card>
|
|
</motion.article>
|
|
);
|
|
}
|
|
|
|
function HydroMetric({ icon: Icon, label, value }: { icon: typeof Droplets; label: string; value: string }) {
|
|
return (
|
|
<div className="rounded-card bg-surface-muted/60 p-2.5">
|
|
<p className="flex items-center gap-1 text-[0.65rem] text-muted">
|
|
<Icon className="size-3" />
|
|
{label}
|
|
</p>
|
|
<p className="mt-1.5 truncate text-xs font-semibold" title={value}>
|
|
{value}
|
|
</p>
|
|
</div>
|
|
);
|
|
}
|