Untitled
unknown
plain_text
a year ago
2.0 kB
2
Indexable
Never
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;