diff --git a/src/components/draggables/labelInput.jsx b/src/components/draggables/labelInput.jsx
index 7e52a23..178b748 100644
--- a/src/components/draggables/labelInput.jsx
+++ b/src/components/draggables/labelInput.jsx
@@ -1,21 +1,12 @@
import React from 'react';
-import { useDrag } from 'react-dnd';
const LabelInput = () => {
-
return (
-
-
- )
+
+
+ );
};
export default LabelInput;
diff --git a/src/components/draggables/statInput.jsx b/src/components/draggables/statInput.jsx
new file mode 100644
index 0000000..6952e5e
--- /dev/null
+++ b/src/components/draggables/statInput.jsx
@@ -0,0 +1,12 @@
+import React from 'react';
+
+const StatInput = () => {
+ return (
+
+ );
+};
+
+export default StatInput;
diff --git a/src/components/draggables/textarea.jsx b/src/components/draggables/textarea.jsx
new file mode 100644
index 0000000..c4db07b
--- /dev/null
+++ b/src/components/draggables/textarea.jsx
@@ -0,0 +1,9 @@
+import React from 'react';
+
+const LabelInput = () => {
+ return (
+
+ );
+};
+
+export default LabelInput;
diff --git a/src/components/dropDiv.jsx b/src/components/dropDiv.jsx
deleted file mode 100644
index bd9b103..0000000
--- a/src/components/dropDiv.jsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import React from 'react';
-import GridLayout from "react-grid-layout";
-
-
-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 (
-
- );
-};
-
-export default DropDiv;
diff --git a/src/components/sheets.jsx b/src/components/sheets.jsx
index ff4af67..feb8fb8 100644
--- a/src/components/sheets.jsx
+++ b/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 (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+ };
+
+ const renderDropDiv = () => {
+ console.log(layout);
+
+ return (
+
+
+ {layout.map((item) => (
+
+
+ {/* Render your component here */}
+ {item.content}
+
+ ))}
+
+
+ );
+ };
+
return (
-
);
};
-export default Sheets;
\ No newline at end of file
+export default Sheets;
diff --git a/src/styles/main.css b/src/styles/main.css
index c82753e..02077f0 100644
--- a/src/styles/main.css
+++ b/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;
- }
}
}
-
}
\ No newline at end of file
diff --git a/src/styles/sheet.css b/src/styles/sheet.css
index fc51cab..003d5b1 100644
--- a/src/styles/sheet.css
+++ b/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;
+ }
}
-}
\ No newline at end of file
+}
+