dimensionlab-website/packages/ui/src/components/telemetry/SignalTrace.tsx

26 lines
709 B
TypeScript

export interface SignalTraceProps {
density?: "regular" | "tight";
orientation?: "horizontal" | "vertical";
tone?: "neutral" | "accent" | "warning";
}
export function SignalTrace({
density = "regular",
orientation = "horizontal",
tone = "accent",
}: SignalTraceProps) {
return (
<div
className="signal-trace"
data-density={density}
data-orientation={orientation}
data-tone={tone}
aria-hidden="true"
>
<span className="signal-trace__rail" />
<span className="signal-trace__node" data-node="start" />
<span className="signal-trace__node" data-node="middle" />
<span className="signal-trace__node" data-node="end" />
</div>
);
}