lightswind/dist/components/ui/connection-graph.js

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.

// @ts-nocheck
"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { motion } from "framer-motion";
import { cn } from "../../lib/utils";
export const ConnectionGraph = ({ nodes, connections, beamColor = "#ff4500", beamDuration = 2000, className, }) => {
    return (_jsxs("div", { className: cn("relative w-full h-full", className), children: [nodes.map((node) => (_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 (_jsxs("svg", { className: "absolute pointer-events-none overflow-visible", style: { left: 0, top: 0 }, children: [_jsx("line", { x1: x1, y1: y1, x2: x2, y2: y2, stroke: "rgba(200,200,200,0.4)", strokeWidth: 2 }), _jsx(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
                            } }), _jsx(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));
            })] }));
};
export default ConnectionGraph;