85 lines
2.1 KiB
TypeScript
85 lines
2.1 KiB
TypeScript
import type { MetroEntry } from "@/types/analytics";
|
||
|
||
interface Props {
|
||
nearest_name: string | null;
|
||
nearest_walk_minutes: number | null;
|
||
top3: MetroEntry[] | null;
|
||
}
|
||
|
||
export function ObjectMetroList({
|
||
nearest_name,
|
||
nearest_walk_minutes,
|
||
top3,
|
||
}: Props) {
|
||
// Build display list: prefer top3 array, fallback to nearest fields
|
||
const entries: MetroEntry[] =
|
||
top3 && top3.length > 0
|
||
? top3
|
||
: nearest_name
|
||
? [
|
||
{
|
||
name: nearest_name,
|
||
time: nearest_walk_minutes,
|
||
line: null,
|
||
color: null,
|
||
isWalk: true,
|
||
},
|
||
]
|
||
: [];
|
||
|
||
if (entries.length === 0) {
|
||
return (
|
||
<p style={{ color: "#9ca3af", fontSize: 13 }}>
|
||
Данные о метро отсутствуют.
|
||
</p>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
|
||
{entries.map((m, i) => (
|
||
<div
|
||
key={`${m.name}-${i}`}
|
||
style={{
|
||
display: "flex",
|
||
alignItems: "center",
|
||
gap: 10,
|
||
padding: "10px 14px",
|
||
background: "#f9fafb",
|
||
borderRadius: 8,
|
||
border: "1px solid #e6e8ec",
|
||
}}
|
||
>
|
||
<span
|
||
style={{
|
||
width: 12,
|
||
height: 12,
|
||
borderRadius: 6,
|
||
background: m.color ?? "#6b7280",
|
||
flexShrink: 0,
|
||
display: "inline-block",
|
||
}}
|
||
/>
|
||
<div style={{ flex: 1 }}>
|
||
<div style={{ fontWeight: 500, fontSize: 14 }}>{m.name}</div>
|
||
{m.line ? (
|
||
<div style={{ color: "#5b6066", fontSize: 12 }}>{m.line}</div>
|
||
) : null}
|
||
</div>
|
||
{m.time != null ? (
|
||
<div
|
||
style={{
|
||
fontSize: 13,
|
||
color: "#5b6066",
|
||
fontVariantNumeric: "tabular-nums",
|
||
whiteSpace: "nowrap",
|
||
}}
|
||
>
|
||
{m.isWalk !== false ? "🚶" : "🚗"} {m.time} мин
|
||
</div>
|
||
) : null}
|
||
</div>
|
||
))}
|
||
</div>
|
||
);
|
||
}
|