Untitled

import React, { useState } from "react";

const ElectricalComponent = ({ type }) => {
  return (
    <div
      style={{
        width: "50px",
        height: "50px",
        backgroundColor: "gray",
        margin: "5px",
        cursor: "grab",
      }}
      draggable
      onDragStart={(e) => {
        e.dataTransfer.setData("text/plain", type);
      }}
    >
      {type}
    </div>
  );
};

const Canvas = () => {
  const [components, setComponents] = useState([]);

  const handleDrop = (e) => {
    e.preventDefault();
    const type = e.dataTransfer.getData("text/plain");
    const left = e.clientX;
    const top = e.clientY;
    const component = { type, left, top };
    setComponents([...components, component]);
  };

  const handleDragOver = (e) => {
    e.preventDefault();
  };

  return (
    <div
      style={{ width: "600px", height: "400px", border: "1px solid black" }}
      onDrop={handleDrop}
      onDragOver={handleDragOver}
    >
      {components.map((component, index) => (
        <div
          key={index}
          style={{
            width: "50px",
            height: "50px",
            backgroundColor: "gray",
            position: "absolute",
            left: component.left,
            top: component.top,
          }}
        >
          {component.type}
        </div>
      ))}
    </div>
  );
};

const App = () => {
  return (
    <div>
      <div
        style={{
          width: "100%",
          height: "80px",
          backgroundColor: "lightgray",
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
        }}
      >
        <ElectricalComponent type="Resistor" />
        <ElectricalComponent type="Capacitor" />
        <ElectricalComponent type="Inductor" />
      </div>
      <Canvas />
    </div>
  );
};

export default App;