incorporate react grid layout

package.json

@@ -11,6 +11,7 @@
     "react-dnd": "^16.0.1",
     "react-dnd-html5-backend": "^16.0.1",
     "react-dom": "^18.2.0",
+    "react-grid-layout": "^1.4.4",
     "react-router-dom": "^6.22.1",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"

src/components/draggables/labelInput.jsx

@@ -1,14 +1,8 @@
 import React from 'react';
 import { useDrag } from 'react-dnd';
 
-const DraggableItem = ({ name }) => {
-  const [{ isDragging }, drag] = useDrag({
-    item: { name },
-    type: 'draggable',
-    collect: (monitor) => ({
-      isDragging: !!monitor.isDragging(),
-    }),
-  });
+const LabelInput = () => {
+
   return (
     <div
     className='item'
@@ -24,4 +18,4 @@ const DraggableItem = ({ name }) => {
   )
 };
 
-export default DraggableItem;
+export default LabelInput;

src/components/dropDiv.jsx

@@ -1,30 +1,22 @@
 import React from 'react';
-import { useDrop } from "react-dnd";
+import GridLayout from "react-grid-layout";
 
-const DropDiv = ({type, items}) => {
-  const [{ isOver }, drop] = useDrop(() => ({
-    accept: type,
-    collect: (monitor) => ({
-      isOver: !!monitor.isOver(),
-    }),
-  }));
-  console.log(items);
-  if (items.length === 0) {
-    <div 
-      ref={drop}
-      className={`drop-div ${isOver ? "drop-over" : ""}`}
-      >
-      </div>
-  }
+
+const DropDiv = () => {
+  const layout = [
+    { i: 'a', x: 0, y: 0, w: 2, h: 2 },
+    { i: 'b', x: 2, y: 0, w: 2, h: 2 },
+    { i: 'c', x: 4, y: 0, w: 2, h: 2 }
+  ];
+
   return (
-    <div 
-      ref={drop}
-      className={`drop-div ${isOver ? "drop-over" : ""}`}
-      >
-        {items.map((item) => {
-          return <div className="item" key={item.id}>{item.content}</div>
-        })}
-      </div>
+    <div>
+        <GridLayout className="layout" layout={layout} cols={6} rowHeight={100} width={1200}>
+          <div key="a">A</div>
+          <div key="b">B</div>
+          <div key="c">C</div>
+        </GridLayout>
+    </div>
   );
 };
 

src/components/sheets.jsx

@@ -1,24 +1,13 @@
 import React, { useState } from 'react';
 import { Link } from 'react-router-dom';
 import '../styles/main.css'; // Import CSS/LESS file directly
-import { DndProvider } from 'react-dnd';
-import { HTML5Backend } from 'react-dnd-html5-backend';
-
-import DropDiv from './dropDiv.jsx';
-import DraggableItem from './draggables/labelInput.jsx';
+import '../../node_modules/react-grid-layout/css/styles.css';
+import '../../node_modules/react-resizable/css/styles.css';
+import '../styles/sheet.css';
+import DropDiv from './dropDiv';
 
 
 const Sheets = () => {
-  let items = [];
-
-  function handleDrop(item) {
-    const id = items.length+1;
-    const draggable = {id:id , content: item};
-
-    items.push(draggable);
-  }
-
-
   return (
     <div className="Sheets page">
       <nav className="nav">
@@ -29,19 +18,15 @@ const Sheets = () => {
         <aside className='sidebar'>
           <h2>Pick your draggable component</h2>
           <div className="picker">
-            <DndProvider backend={HTML5Backend}>
-              <DraggableItem name="Item1" />
-            </DndProvider>
+
           </div>
         </aside>
         <section id="create">
           <h1>Create your own</h1>
           <div className="drop">
-            <DndProvider backend={HTML5Backend}>
-              <DropDiv type="item" onDrop={handleDrop(<DraggableItem/>)} items={items}/>
-            </DndProvider>
+            <DropDiv></DropDiv>
           </div>
-          <button>Export as pdf {items.length}</button>
+          <button>Export as pdf</button>
 
         </section>
       </main>

src/styles/main.css

@@ -1,3 +1,8 @@
+body {
+    background: #413939;
+    color:white;
+}
+
 .page {
     padding-block: 100px;
     width: clamp(600px, 33%, 900px);
@@ -33,7 +38,7 @@
             padding-left: 20px;
 
             .picker {
-                background: #eee;
+                background: #3b3b3b;
                 border:1px solid #ccc;
                 border-radius: 10px;
                 padding: 10px;

src/styles/sheet.css

@@ -0,0 +1,9 @@
+.drop {
+
+    .react-grid-item {
+        display:grid;
+        place-items:center;
+        background: #ff7f503d;
+        border: 1px solid red;
+    }
+}