diff --git a/src/components/draggables/labelInput.jsx b/src/components/draggables/labelInput.jsx
index 0e8a9a4..700bbf2 100644
--- a/src/components/draggables/labelInput.jsx
+++ b/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 (
-
-
+
+
)
};
-export default MyDraggableComponent;
+export default DraggableItem;
diff --git a/src/components/dropDiv.jsx b/src/components/dropDiv.jsx
new file mode 100644
index 0000000..833021d
--- /dev/null
+++ b/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) {
+
+
+ }
+ return (
+
+ {items.map((item) => {
+ return
{item.content}
+ })}
+
+ );
+};
+
+export default DropDiv;
diff --git a/src/components/sheets.jsx b/src/components/sheets.jsx
index 551bd45..605dd1d 100644
--- a/src/components/sheets.jsx
+++ b/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 (
-
+