functional website

src/components/draggables/labelInput.jsx

@@ -1,21 +1,12 @@
 import React from 'react';
-import { useDrag } from 'react-dnd';
 
 const LabelInput = () => {
-
   return (
-    <div
-    className='item'
-    ref={drag}
-    style={{ opacity: isDragging ? 0.4 : 1 }}>
       <label>
         Character Name
-        <input 
-          type="text"
-          name="name"
-          id="characterName"/></label>
-    </div>
-  )
+        <input type="text" name="name" id="characterName" />
+      </label>
+  );
 };
 
 export default LabelInput;

src/components/draggables/statInput.jsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+const StatInput = () => {
+  return (
+      <label>
+        Ability
+        <input type="number" name="ability"/>
+      </label>
+  );
+};
+
+export default StatInput;

src/components/draggables/textarea.jsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+const LabelInput = () => {
+  return (
+      <textarea name="" id="" cols="30" rows="10"></textarea>
+  );
+};
+
+export default LabelInput;

src/components/sheets.jsx

@@ -1,37 +1,99 @@
-import React, { useState } from 'react';
-import { Link } from 'react-router-dom';
-import '../styles/main.css'; // Import CSS/LESS file directly
-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';
-
+import React, { useState } from "react";
+import GridLayout from "react-grid-layout";
+import { Link } from "react-router-dom";
+import "../styles/main.css"; // Import CSS/LESS file directly
+import "../../node_modules/react-grid-layout/css/styles.css";
+import "../../node_modules/react-resizable/css/styles.css";
+import "../styles/sheet.css";
+import LabelInput from "./draggables/labelInput";
+import Textarea from "./draggables/textarea";
+import StatInput from  "./draggables/statInput";
 
 const Sheets = () => {
+  const [layout, setLayout] = useState([]);
+
+  const addNewItem = (item, width, height) => {
+    const newItem = {
+      i: `item-${layout.length + 1}`,
+      x: 0,
+      y: 0,
+      w: width,
+      h: height,
+      content: item,
+    };
+    setLayout((prevLayout) => [...prevLayout, newItem]);
+  };
+
+  const deleteItem = (itemId) => {
+    setLayout((prevLayout) => prevLayout.filter((item) => item.i !== itemId));
+  };
+
+  const renderPicker = () => {
+    return (
+      <div className="picker">
+        <div className="item">
+          <LabelInput />
+          <button className="addItem" onClick={() => addNewItem(<LabelInput />, 2, 1)}>Add</button>
+        </div>
+        <div className="item">
+          <Textarea />
+          <button className="addItem" onClick={() => addNewItem(<Textarea />, 3, 3)}>Add</button>
+        </div>
+        <div className="item">
+          <StatInput />
+          <button className="addItem" onClick={() => addNewItem(<StatInput />, 1, 1)}>Add</button>
+        </div>
+      </div>
+    );
+  };
+
+  const renderDropDiv = () => {
+    console.log(layout);
+
+    return (
+      <div>
+        <GridLayout
+          className="layout"
+          layout={layout}
+          cols={6}
+          rowHeight={100}
+          width={816}
+        >
+          {layout.map((item) => (
+            <div key={item.i}>
+              <button className="deleteItem" onClick={() => deleteItem(item.i)}>x</button>
+              {/* Render your component here */}
+                {item.content}
+            </div>
+          ))}
+        </GridLayout>
+      </div>
+    );
+  };
+
   return (
     <div className="Sheets page">
       <nav className="nav">
-        <Link to="/builder" className='navButton'>Builder</Link>
-        <Link to="/sheets" className='navButton'>Sheets</Link>
+        <Link to="/builder" className="navButton">
+          Builder
+        </Link>
+        <Link to="/sheets" className="navButton">
+          Sheets
+        </Link>
       </nav>
       <main className="content">
-        <aside className='sidebar'>
+        <aside className="sidebar">
           <h2>Pick your draggable component</h2>
-          <div className="picker">
-
-          </div>
+          {renderPicker()}
         </aside>
         <section id="create">
           <h1>Create your own</h1>
-          <div className="drop">
-            <DropDiv></DropDiv>
-          </div>
-          <button>Export as pdf</button>
-
+          <div className="drop">{renderDropDiv()}</div>
+          <button onClick={() => {alert('This is not ready yet bro')}}>Export as pdf</button>
         </section>
       </main>
     </div>
   );
 };
 
-export default Sheets;
+export default Sheets;

src/styles/main.css

@@ -1,6 +1,6 @@
 body {
     background: #413939;
-    color:white;
+    color: white;
 }
 
 .page {
@@ -28,41 +28,15 @@ body {
 
     .content {
 
-
         .sidebar {
-            position: absolute;
+            position: fixed;
             left: 0;
             top: 0;
             height: 92vh;
             width: 400px;
             padding-left: 20px;
 
-            .picker {
-                background: #3b3b3b;
-                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:600px;
-
-            .drop-div {
-                min-height:600px;
-                width:600px;
-                border:1px solid lightgrey;
-                border-radius:7px;
-            }
         }
     }
-
 }

src/styles/sheet.css

@@ -1,14 +1,80 @@
+.sidebar {
+    .picker {
+        background: #3b3b3b;
+        border: 1px solid #ccc;
+        border-radius: 10px;
+        padding: 10px;
+        height: 100%;
+        overflow: auto;
+
+        .item {
+            border-bottom: 2px solid grey;
+            padding-bottom: 5px;
+            max-height: 100px;
+
+            display: grid;
+            grid-template-columns: 1fr 55px;
+            align-items: center;
+            gap: 15px;
+
+            textarea {
+                height: 100px;
+            }
+
+            .addItem {
+                padding: 5px 10px;
+            }
+        }
+    }
+}
+
+
 .drop {
-     border: 1px solid coral;
+    border: 1px solid coral;
+    min-height: 600px;
+    width: 816px;
+    border-radius: 7px;
+    margin-bottom: 20px;
+
     .react-grid-layout {
-
+        height: 1056px !important;
     }
-
 
     .react-grid-item {
-        display:grid;
-        place-items:center;
+        position: relative;
+        display: grid;
+        place-items: center;
         background: #ff7f503d;
         border: 1px solid red;
+
+        .deleteItem {
+            background: unset;
+            border: unset;
+            color: white;
+            font-weight: 900;
+            filter: drop-shadow(1px 1px 2px black);
+            position: absolute;
+            top: 0;
+            right: 0;
+            opacity: 0;
+        }
+
+        &:is(:hover, :focus, :focus-within) .deleteItem {
+            opacity: 1;
+        }
+
+        input[type="text"] {
+            width: 100%;
+        }
+        input[type="number"] {
+            width:5ch;
+        }
+
+        textarea {
+            resize: none;
+            width: 100% !important;
+            height: 100% !important;
+        }
     }
-}
+}
+