const { Breadcrumb, Badge, Button, Divider, Icon, Stat, SectionLabel } = window.BuildingInvestDesignSystem_f8840b;
function ProjectDetail({ id, onNavigate, onOpenProject, lang }) {
const t = window.I18N[lang];
const data = window.BI_DATA[lang];
const p = data.projects.find((x) => x.id === id) || data.projects[0];
const others = data.projects.filter((x) => x.id !== p.id).slice(0, 3);
const width = useViewportWidth();
const stack = width < 860;
const scopeCols = width < 480 ? 1 : 2;
const otherCols = width < 640 ? 1 : width < 960 ? 2 : 3;
return <>
onNavigate("home") }, { label: t.projectDetail.breadcrumbProjects, onClick: () => onNavigate("projects") }, p.title]} />
{t.projects.status[p.status]}
{t.projects.categories[p.cat]}
{p.title}
{p.lead}
{t.projectDetail.specLabel}
{[[t.projectDetail.tableLabels.client, p.client], [t.projectDetail.tableLabels.year, p.year], [t.projectDetail.tableLabels.area, p.area], [t.projectDetail.tableLabels.duration, p.duration], [t.projectDetail.tableLabels.category, t.projects.categories[p.cat]]].map(([k, v]) => (
| {k} |
{v} |
))}
{t.projectDetail.executedWorks}
{p.scope.map((s) => (
{s}
))}
{others.map((o) => (
onOpenProject(o.id)} style={{ cursor: "pointer", display: "flex", flexDirection: "column", gap: "var(--space-4)" }}>
{o.title}
))}