38 lines
767 B
TypeScript
38 lines
767 B
TypeScript
import React from 'react';
|
|
|
|
interface ConnectionProps {
|
|
from: { x: number; y: number };
|
|
to: { x: number; y: number };
|
|
fromColor?: string;
|
|
toColor?: string;
|
|
}
|
|
|
|
export const Connection: React.FC<ConnectionProps> = ({ from, to, fromColor, toColor }) => {
|
|
return (
|
|
<g>
|
|
{/* Glow effect */}
|
|
<line
|
|
x1={from.x}
|
|
y1={from.y}
|
|
x2={to.x}
|
|
y2={to.y}
|
|
stroke={fromColor || "#a855f7"}
|
|
strokeWidth="3"
|
|
opacity="0.3"
|
|
/>
|
|
|
|
{/* Main line */}
|
|
<line
|
|
x1={from.x}
|
|
y1={from.y}
|
|
x2={to.x}
|
|
y2={to.y}
|
|
stroke={fromColor || "#a855f7"}
|
|
strokeWidth="1"
|
|
opacity="0.7"
|
|
className="transition-all duration-300"
|
|
/>
|
|
</g>
|
|
);
|
|
};
|