Untitled

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;