dragdropclone

src/components/draggables/labelInput.jsx

@@ -1,21 +1,27 @@
 import React from 'react';
 import { useDrag } from 'react-dnd';
 
-const MyDraggableComponent = ({ isDragging, text }) => {
-  const [{ opacity }, dragRef] = useDrag(
-    () => ({
-      type: 'card',
-      collect: (monitor) => ({
-        opacity: monitor.isDragging() ? 0.5 : 1
-      })
+const DraggableItem = ({ name }) => {
+  const [{ isDragging }, drag] = useDrag({
+    item: { name },
+    type: 'draggable',
+    collect: (monitor) => ({
+      isDragging: !!monitor.isDragging(),
     }),
-    []
-  )
+  });
   return (
-    <div ref={dragRef} style={{ opacity }}>
-      <label>Character Name<input type="text" name="name" id="characterName" /></label>
+    <div
+    className='item'
+    ref={drag}
+    style={{ opacity: isDragging ? 0.4 : 1 }}>
+      <label>
+        Character Name
+        <input 
+          type="text"
+          name="name"
+          id="characterName"/></label>
     </div>
   )
 };
 
-export default MyDraggableComponent;
+export default DraggableItem;

src/components/dropDiv.jsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { useDrop } from "react-dnd";
+
+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>
+  }
+  return (
+    <div 
+      ref={drop}
+      className={`drop-div ${isOver ? "drop-over" : ""}`}
+      >
+        {items.map((item) => {
+          return <div className="item" key={item.id}>{item.content}</div>
+        })}
+      </div>
+  );
+};
+
+export default DropDiv;

src/components/sheets.jsx

@@ -1,14 +1,26 @@
-import React from 'react';
+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 LabelInput from './draggables/labelInput.jsx';
+
+import DropDiv from './dropDiv.jsx';
+import DraggableItem from './draggables/labelInput.jsx';
+
+
+const Sheets = () => {
+  let items = [];
+
+  function handleDrop(item) {
+    const id = items.length+1;
+    const draggable = {id:id , content: item};
+
+    items.push(draggable);
+  }
 
 
-const Home = () => {
   return (
-    <div className="home page">
+    <div className="Sheets page">
       <nav className="nav">
         <Link to="/builder" className='navButton'>Builder</Link>
         <Link to="/sheets" className='navButton'>Sheets</Link>
@@ -18,18 +30,23 @@ const Home = () => {
           <h2>Pick your draggable component</h2>
           <div className="picker">
             <DndProvider backend={HTML5Backend}>
-              <LabelInput />
+              <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>
+          </div>
+          <button>Export as pdf {items.length}</button>
 
         </section>
       </main>
     </div>
   );
 };
 
-export default Home;
+export default Sheets;

src/styles/main.css

@@ -1,5 +1,3 @@
-
-
 .page {
     padding-block: 100px;
     width: clamp(600px, 33%, 900px);
@@ -22,4 +20,44 @@
             border-radius: 2px;
         }
     }
+
+    .content {
+
+
+        .sidebar {
+            position: absolute;
+            left: 0;
+            top: 0;
+            height: 92vh;
+            width: 400px;
+            padding-left: 20px;
+
+            .picker {
+                background: #eee;
+                border:1px solid #ccc;
+                border-radius: 10px;
+                padding: 10px;
+                height:100%;
+                overflow: auto;
+
+                .item {
+                    border-bottom: 2px solid grey;
+                    padding-bottom: 5px;
+                }
+            }
+        }
+
+        #create {
+            height:700px;
+            width:500px;
+
+            .drop-div {
+                min-height:600px;
+                width:500px;
+                border:1px solid lightgrey;
+                border-radius:7px;
+            }
+        }
+    }
+
 }