first commit

app/src/components/layout/sidebarLeft/visualization/widgets/Widgets3D.tsx

@@ -0,0 +1,30 @@
+import widget1 from "../../../../../assets/image/3D/ProductionCapacity.png";
+import widget2 from "../../../../../assets/image/3D/ReturnOfInvestment.png";
+import widget3 from "../../../../../assets/image/3D/StateWorking.png";
+import widget4 from "../../../../../assets/image/3D/Throughput.png";
+const Widgets3D = () => {
+  const widgets = [
+    { name: "Widget 1", img: widget1 },
+    { name: "Widget 2", img: widget2 },
+    { name: "Widget 3", img: widget3 },
+    { name: "Widget 4", img: widget4 },
+  ];
+
+  return (
+    <div className="widgets-container widget3D">
+      {widgets?.map((widget, index) => (
+        <div key={index} className="widget-item" draggable>
+          <div className="widget-name">{widget.name}</div>
+          <img
+            className="widget-image"
+            src={widget.img}
+            alt={widget.name}
+            draggable={false}
+          />
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default Widgets3D;