lightswind
Version:
A collection of beautifully crafted React Components, Blocks & Templates for Modern Developers. Create stunning web applications effortlessly by using our 160+ professional and animated react components.
35 lines • 2.7 kB
JavaScript
;
"use client";
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const framer_motion_1 = require("framer-motion");
const utils_1 = require("@/components/lib/utils");
const ConnectionGraph = ({ nodes, connections, beamColor = "#ff4500", beamDuration = 2000, className, }) => {
return ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)("relative w-full h-full", className), children: [nodes.map((node) => ((0, jsx_runtime_1.jsx)("div", { className: "absolute flex items-center justify-center rounded-xl \r\n shadow-lg bg-white dark:bg-neutral-900 border border-neutral-200 \r\n dark:border-neutral-700 w-28 h-28", style: { left: node.position.x, top: node.position.y }, children: node.content }, node.id))), connections.map((conn, i) => {
const from = nodes.find((n) => n.id === conn.from);
const to = nodes.find((n) => n.id === conn.to);
if (!from || !to)
return null;
const x1 = from.position.x + 56; // center offset
const y1 = from.position.y + 56;
const x2 = to.position.x + 56;
const y2 = to.position.y + 56;
const isHorizontal = Math.abs(y1 - y2) < Math.abs(x1 - x2);
return ((0, jsx_runtime_1.jsxs)("svg", { className: "absolute pointer-events-none overflow-visible", style: { left: 0, top: 0 }, children: [(0, jsx_runtime_1.jsx)("line", { x1: x1, y1: y1, x2: x2, y2: y2, stroke: "rgba(200,200,200,0.4)", strokeWidth: 2 }), (0, jsx_runtime_1.jsx)(framer_motion_1.motion.circle, { r: 6, fill: beamColor, initial: { x: x1, y: y1, opacity: 0 }, animate: {
x: [x1, x2],
y: [y1, y2],
opacity: [0, 1, 1, 0],
}, transition: {
duration: beamDuration / 1000,
repeat: Infinity,
ease: "easeInOut",
repeatDelay: Math.random() * 2, // random splash timing
} }), (0, jsx_runtime_1.jsx)(framer_motion_1.motion.circle, { r: 0, cx: x2, cy: y2, fill: beamColor, animate: { r: [0, 10, 0], opacity: [0, 0.8, 0] }, transition: {
duration: 0.8,
repeat: Infinity,
repeatDelay: beamDuration / 1000 + Math.random() * 2,
} })] }, i));
})] }));
};
exports.default = ConnectionGraph;
//# sourceMappingURL=connection-graph.js.map