57 lines
3.0 KiB
TypeScript
57 lines
3.0 KiB
TypeScript
import { useState } from "react";
|
||
import { Link, useParams } from "react-router-dom";
|
||
import { SchemeAuditTab } from "../features/schemes/SchemeAuditTab";
|
||
import { SchemeOverviewTab } from "../features/schemes/SchemeOverviewTab";
|
||
import { SchemePricingTab } from "../features/schemes/SchemePricingTab";
|
||
import { SchemeStructureTab } from "../features/schemes/SchemeStructureTab";
|
||
import { SchemeTestModeTab } from "../features/schemes/SchemeTestModeTab";
|
||
import { SchemeVersionsTab } from "../features/schemes/SchemeVersionsTab";
|
||
import { SchemeViewerTab } from "../features/schemes/SchemeViewerTab";
|
||
|
||
type DetailTab = "viewer" | "overview" | "versions" | "structure" | "pricing" | "test" | "audit";
|
||
|
||
export function SchemeDetailPage() {
|
||
const { schemeId } = useParams();
|
||
const [tab, setTab] = useState<DetailTab>("viewer");
|
||
|
||
if (!schemeId) {
|
||
return (
|
||
<div className="panel error">
|
||
<h2>ID схемы отсутствует</h2>
|
||
<Link to="/" className="btn btn-secondary">Назад к списку</Link>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<>
|
||
<div className="panel">
|
||
<div className="scheme-card-header">
|
||
<div>
|
||
<h1>Карточка схемы</h1>
|
||
<p className="muted">ID схемы: {schemeId}</p>
|
||
</div>
|
||
|
||
<div className="toolbar">
|
||
<button type="button" className={`btn ${tab === "viewer" ? "btn-primary" : "btn-secondary"}`} onClick={() => setTab("viewer")}>Просмотр схемы</button>
|
||
<button type="button" className={`btn ${tab === "overview" ? "btn-primary" : "btn-secondary"}`} onClick={() => setTab("overview")}>Обзор</button>
|
||
<button type="button" className={`btn ${tab === "versions" ? "btn-primary" : "btn-secondary"}`} onClick={() => setTab("versions")}>Версии</button>
|
||
<button type="button" className={`btn ${tab === "structure" ? "btn-primary" : "btn-secondary"}`} onClick={() => setTab("structure")}>Структура</button>
|
||
<button type="button" className={`btn ${tab === "pricing" ? "btn-primary" : "btn-secondary"}`} onClick={() => setTab("pricing")}>Тарифы</button>
|
||
<button type="button" className={`btn ${tab === "test" ? "btn-primary" : "btn-secondary"}`} onClick={() => setTab("test")}>Тестовый режим</button>
|
||
<button type="button" className={`btn ${tab === "audit" ? "btn-primary" : "btn-secondary"}`} onClick={() => setTab("audit")}>Аудит</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{tab === "viewer" ? <SchemeViewerTab schemeId={schemeId} /> : null}
|
||
{tab === "overview" ? <SchemeOverviewTab schemeId={schemeId} /> : null}
|
||
{tab === "versions" ? <SchemeVersionsTab schemeId={schemeId} /> : null}
|
||
{tab === "structure" ? <SchemeStructureTab schemeId={schemeId} /> : null}
|
||
{tab === "pricing" ? <SchemePricingTab schemeId={schemeId} /> : null}
|
||
{tab === "test" ? <SchemeTestModeTab schemeId={schemeId} /> : null}
|
||
{tab === "audit" ? <SchemeAuditTab schemeId={schemeId} /> : null}
|
||
</>
|
||
);
|
||
}
|