132 lines
3.8 KiB
TypeScript
132 lines
3.8 KiB
TypeScript
"use client";
|
||
|
||
import Link from "next/link";
|
||
|
||
import type { RecommendComparable } from "@/types/analytics";
|
||
|
||
export function RecommendComparables({
|
||
items,
|
||
}: {
|
||
items: RecommendComparable[];
|
||
}) {
|
||
if (items.length === 0) {
|
||
return (
|
||
<p style={{ color: "#9ca3af", fontSize: 13 }}>
|
||
Нет comparable ЖК с такими фильтрами.
|
||
</p>
|
||
);
|
||
}
|
||
return (
|
||
<div
|
||
style={{
|
||
display: "grid",
|
||
gridTemplateColumns: "repeat(auto-fill, minmax(260px, 1fr))",
|
||
gap: 12,
|
||
}}
|
||
>
|
||
{items.map((c) => {
|
||
const sold = c.sold_perc;
|
||
const soldColor =
|
||
sold == null
|
||
? "#9ca3af"
|
||
: sold >= 50
|
||
? "#0a7a3a"
|
||
: sold >= 30
|
||
? "#9a6700"
|
||
: "#b3261e";
|
||
|
||
const hasCadQuarter = c.cad_quarter != null;
|
||
const hasBuildings = c.buildings_n != null && c.buildings_n > 0;
|
||
const showMeta = hasCadQuarter || hasBuildings;
|
||
|
||
const metaParts: string[] = [];
|
||
if (hasCadQuarter) metaParts.push(`кв. ${c.cad_quarter}`);
|
||
if (hasBuildings) metaParts.push(`${c.buildings_n} корп.`);
|
||
|
||
const hasMapLink = c.lat != null && c.lon != null;
|
||
const mapUrl = hasMapLink
|
||
? `https://yandex.ru/maps/?ll=${c.lon}%2C${c.lat}&z=16&pt=${c.lon}%2C${c.lat}`
|
||
: null;
|
||
|
||
return (
|
||
<Link
|
||
key={c.obj_id}
|
||
href={`/analytics/objects/${c.obj_id}`}
|
||
style={{
|
||
border: "1px solid #e6e8ec",
|
||
borderRadius: 8,
|
||
padding: 14,
|
||
background: "#fff",
|
||
textDecoration: "none",
|
||
color: "inherit",
|
||
display: "block",
|
||
transition: "border-color 120ms",
|
||
}}
|
||
>
|
||
<div
|
||
style={{
|
||
fontSize: 14,
|
||
fontWeight: 600,
|
||
marginBottom: 4,
|
||
lineHeight: 1.2,
|
||
}}
|
||
>
|
||
{c.comm_name ?? `ЖК #${c.obj_id}`}
|
||
</div>
|
||
<div style={{ fontSize: 12, color: "#5b6066", marginBottom: 4 }}>
|
||
{c.dev_name ?? "—"}
|
||
{c.obj_class ? ` · ${c.obj_class}` : ""}
|
||
</div>
|
||
{showMeta ? (
|
||
<div
|
||
style={{
|
||
fontSize: 12,
|
||
color: "#5b6066",
|
||
marginBottom: 8,
|
||
display: "flex",
|
||
alignItems: "center",
|
||
gap: 6,
|
||
}}
|
||
>
|
||
<span>{metaParts.join(" · ")}</span>
|
||
{mapUrl ? (
|
||
<a
|
||
href={mapUrl}
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
onClick={(e) => e.stopPropagation()}
|
||
style={{
|
||
textDecoration: "none",
|
||
lineHeight: 1,
|
||
fontSize: 13,
|
||
}}
|
||
title="Открыть на карте"
|
||
>
|
||
📍
|
||
</a>
|
||
) : null}
|
||
</div>
|
||
) : (
|
||
<div style={{ marginBottom: 8 }} />
|
||
)}
|
||
<div
|
||
style={{
|
||
display: "flex",
|
||
gap: 12,
|
||
alignItems: "center",
|
||
fontSize: 13,
|
||
}}
|
||
>
|
||
<span>
|
||
Квартир: <strong>{c.flat_count ?? "—"}</strong>
|
||
</span>
|
||
<span style={{ color: soldColor, fontWeight: 600 }}>
|
||
Sold: {sold == null ? "—" : `${sold.toFixed(0)}%`}
|
||
</span>
|
||
</div>
|
||
</Link>
|
||
);
|
||
})}
|
||
</div>
|
||
);
|
||
}
|