import React, { useState } from "react";
const Sidebar = () => {
const handleDragStart = (e, componentType) => {
e.dataTransfer.setData("componentType", componentType);
};
return (
<div className="sidebar">
<h2>Electronic Components</h2>
<div
className="component"
draggable
onDragStart={(e) => handleDragStart(e, "resistor")}
>
<img src="/resistor.svg" alt="Resistor" />
<p>Resistor</p>
</div>
<div
className="component"
draggable
onDragStart={(e) => handleDragStart(e, "capacitor")}
>
<img src="/capacitor.svg" alt="Capacitor" />
<p>Capacitor</p>
</div>
{/* Add more components as needed */}
</div>
);
};
const Canvas = () => {
const [components, setComponents] = useState([]);
const handleDrop = (e) => {
e.preventDefault();
const componentType = e.dataTransfer.getData("componentType");
const xPos = e.clientX;
const yPos = e.clientY;
setComponents([...components, { type: componentType, x: xPos, y: yPos }]);
};
const handleDragOver = (e) => {
e.preventDefault();
};
return (
<div className="canvas" onDrop={handleDrop} onDragOver={handleDragOver}>
{components.map((component, index) => (
<div
key={index}
className="component"
style={{ left: component.x, top: component.y }}
>
{/* Render the component based on its type */}
{component.type === "resistor" && (
<img src="/resistor.svg" alt="Resistor" />
)}
{component.type === "capacitor" && (
<img src="/capacitor.svg" alt="Capacitor" />
)}
</div>
))}
</div>
);
};
const App = () => {
return (
<div className="app">
<Sidebar />
<Canvas />
</div>
);
};
export default App;