Flow Builder Page Creation

import React, { useState } from 'react';
import './App.css';

const App = () => {
  const [cards, setCards] = useState([]);
  const [connections, setConnections] = useState([]);

  const handleDragStart = (e, id) => {
    e.dataTransfer.setData('text/plain', id);
  };

  const handleDrop = (e) => {
    e.preventDefault();
    const id = e.dataTransfer.getData('text');
    const rect = e.target.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const y = e.clientY - rect.top;
    setCards([...cards, { id, x, y }]);
  };

  const handleConnect = (from, to) => {
    setConnections([...connections, { from, to }]);
  };

  return (
    <div className="App">
      <div className="flow-builder" onDrop={handleDrop} onDragOver={(e) => e.preventDefault()}>
        {cards.map((card) => (
          <div
            key={card.id}
            className="card"
            style={{ left: card.x, top: card.y }}
            draggable
            onDragStart={(e) => handleDragStart(e, card.id)}
          >
            Card {card.id}
          </div>
        ))}
        {connections.map((conn, index) => (
          <div key={index} className="connection" style={{ left: conn.from.x, top: conn.from.y }} />
        ))}
      </div>
      <div className="toolbar">
        <button onClick={() => handleConnect(cards[0], cards[1])}>Connect</button>
      </div>
    </div>
  );
};

export default App;