29 lines
879 B
TypeScript
29 lines
879 B
TypeScript
interface FlowchartConnectorProps {
|
|
completed: boolean;
|
|
isPhase?: boolean;
|
|
}
|
|
|
|
export function FlowchartConnector({ completed, isPhase = false }: FlowchartConnectorProps) {
|
|
const height = isPhase ? 32 : 20;
|
|
const color = completed ? '#22c55e' : '#475569';
|
|
|
|
return (
|
|
<div className={`flex justify-center ${isPhase ? 'py-1' : 'py-0'}`}>
|
|
<svg width="20" height={height} viewBox={`0 0 20 ${height}`} className="flex-shrink-0">
|
|
<line
|
|
x1="10" y1="0" x2="10" y2={height - 6}
|
|
stroke={color}
|
|
strokeWidth={isPhase ? 2.5 : 1.5}
|
|
strokeDasharray={completed ? 'none' : '3 3'}
|
|
strokeOpacity={completed ? 1 : 0.5}
|
|
/>
|
|
<polygon
|
|
points={`5,${height - 6} 10,${height} 15,${height - 6}`}
|
|
fill={color}
|
|
fillOpacity={completed ? 1 : 0.5}
|
|
/>
|
|
</svg>
|
|
</div>
|
|
);
|
|
}
|