File size: 1,754 Bytes
703a33a | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 | import { useState } from "react";
import type { ContractMap } from "../content/types";
interface ContractsSectionProps {
contracts: ContractMap;
}
const contractLabels: Array<{ key: keyof ContractMap; label: string; endpoint: string }> = [
{ key: "voice_registry", label: "Voice registry", endpoint: "/api/contracts/voice_registry?download=true" },
{
key: "route_model_matrix",
label: "Route/model matrix",
endpoint: "/api/contracts/route_model_matrix?download=true",
},
{
key: "seed_voice_library",
label: "Seed voice library",
endpoint: "/api/contracts/seed_voice_library?download=true",
},
{ key: "provider_config", label: "Provider config", endpoint: "/api/contracts/provider_config?download=true" },
];
export function ContractsSection({ contracts }: ContractsSectionProps) {
const [activeKey, setActiveKey] = useState<keyof ContractMap>("voice_registry");
return (
<div className="contracts-layout">
<div className="contract-tabs" role="tablist" aria-label="Data contracts">
{contractLabels.map((item) => (
<button
key={item.key}
type="button"
className={item.key === activeKey ? "contract-tab active" : "contract-tab"}
onClick={() => setActiveKey(item.key)}
>
{item.label}
</button>
))}
</div>
<div className="contract-viewer">
<div className="contract-meta">
<strong>{contractLabels.find((item) => item.key === activeKey)?.label}</strong>
<a href={contractLabels.find((item) => item.key === activeKey)?.endpoint}>Download JSON</a>
</div>
<pre>{JSON.stringify(contracts[activeKey], null, 2)}</pre>
</div>
</div>
);
}
|