44 lines
1.4 KiB
TypeScript
44 lines
1.4 KiB
TypeScript
"use client";
|
|
|
|
import { useVisualization } from "./visualization-context";
|
|
|
|
function formatValue(value: unknown): string {
|
|
if (value === null) return "null";
|
|
if (value === undefined) return "undefined";
|
|
if (typeof value === "string") return `"${value}"`;
|
|
if (typeof value === "boolean") return value ? "true" : "false";
|
|
if (Array.isArray(value)) return `[${value.map(formatValue).join(", ")}]`;
|
|
if (typeof value === "object") return JSON.stringify(value);
|
|
return String(value);
|
|
}
|
|
|
|
export function VariablesPane() {
|
|
const { currentStep } = useVisualization();
|
|
|
|
if (!currentStep?.variables || Object.keys(currentStep.variables).length === 0) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<div className="rounded-lg border border-border bg-card p-3">
|
|
<h4 className="mb-2 text-xs font-medium uppercase tracking-wider text-muted-foreground">
|
|
Variables
|
|
</h4>
|
|
<div className="flex flex-wrap gap-3">
|
|
{Object.entries(currentStep.variables).map(([name, value]) => (
|
|
<div
|
|
key={name}
|
|
className="flex items-center gap-2 rounded-md bg-muted px-2 py-1"
|
|
>
|
|
<span className="font-mono text-sm font-medium text-primary">
|
|
{name}
|
|
</span>
|
|
<span className="text-muted-foreground">=</span>
|
|
<span className="font-mono text-sm">{formatValue(value)}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|