109 lines
2.7 KiB
TypeScript
109 lines
2.7 KiB
TypeScript
"use client";
|
||
|
||
import type { Hydrology, HydrologyNearest } from "@/types/site-finder";
|
||
|
||
interface Props {
|
||
hydrology: Hydrology;
|
||
}
|
||
|
||
const SUBTYPE_ICON: Record<string, string> = {
|
||
river: "🏞",
|
||
stream: "💦",
|
||
lake_or_pond: "🪷",
|
||
canal: "🚣",
|
||
};
|
||
|
||
function subtypeLabel(subtype: HydrologyNearest["subtype"]): string {
|
||
switch (subtype) {
|
||
case "river":
|
||
return "река";
|
||
case "stream":
|
||
return "ручей";
|
||
case "lake_or_pond":
|
||
return "озеро/пруд";
|
||
case "canal":
|
||
return "канал";
|
||
default:
|
||
return "водоём";
|
||
}
|
||
}
|
||
|
||
export function HydrologyBlock({ hydrology }: Props) {
|
||
const top5 = hydrology.nearest.slice(0, 5);
|
||
|
||
return (
|
||
<div
|
||
style={{
|
||
borderRadius: 10,
|
||
padding: "14px 16px",
|
||
background: "#f0f9ff",
|
||
border: "1px solid #bae6fd",
|
||
display: "flex",
|
||
flexDirection: "column",
|
||
gap: 10,
|
||
}}
|
||
>
|
||
<div style={{ fontSize: 13, fontWeight: 700, color: "#0369a1" }}>
|
||
Гидрология
|
||
</div>
|
||
|
||
{/* Flood risk banner */}
|
||
{hydrology.flood_risk_flag && (
|
||
<div
|
||
style={{
|
||
borderRadius: 8,
|
||
padding: "10px 14px",
|
||
background: "#fecaca",
|
||
border: "1px solid #f87171",
|
||
fontSize: 13,
|
||
fontWeight: 600,
|
||
color: "#b91c1c",
|
||
display: "flex",
|
||
alignItems: "center",
|
||
gap: 6,
|
||
}}
|
||
>
|
||
<span>⚠</span>
|
||
<span>Возможная пойма — река/канал в <200м</span>
|
||
</div>
|
||
)}
|
||
|
||
{/* Nearest water bodies */}
|
||
{top5.length === 0 ? (
|
||
<div style={{ fontSize: 13, color: "#6b7280" }}>
|
||
Поблизости водных объектов нет
|
||
</div>
|
||
) : (
|
||
<div style={{ display: "flex", flexDirection: "column", gap: 5 }}>
|
||
{top5.map((item, i) => {
|
||
const icon = SUBTYPE_ICON[item.subtype ?? ""] ?? "💧";
|
||
const label = subtypeLabel(item.subtype);
|
||
const name = item.name ?? "б/н";
|
||
return (
|
||
<div
|
||
key={i}
|
||
style={{
|
||
display: "flex",
|
||
alignItems: "center",
|
||
gap: 6,
|
||
fontSize: 13,
|
||
color: "#374151",
|
||
}}
|
||
>
|
||
<span>{icon}</span>
|
||
<span>
|
||
{name} {label} — {Math.round(item.distance_m)} м
|
||
</span>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
)}
|
||
|
||
{/* Note */}
|
||
{hydrology.note && (
|
||
<div style={{ fontSize: 11, color: "#9ca3af" }}>{hydrology.note}</div>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|