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 ( -
- -
A
-
B
-
C
-
-
- ); -}; - -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 ( +
+
+ + +
+
+