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;