working on DND kit

src/App.js

@@ -7,17 +7,28 @@ import WidgetsContainer from './sidebar/widgetsContainer'
 import UploadsContainer from './sidebar/uploadsContainer'
 import Canvas from './canvas/canvas'
 import Header from './components/header'
+import { DndContext, useSensors, useSensor, PointerSensor, closestCorners, DragOverlay } from '@dnd-kit/core'
+import { DraggableWidgetCard } from './components/cards'
+
 
 function App() {
 
     const [uploadedAssets, setUploadedAssets] = useState([]) //  a global storage for assets, since redux can't store files(serialize files)
 
+	const [sidebarWidgets, setSidebarWidgets] = useState([])
+	const [canvasWidgets, setCanvasWidgets] = useState([]) // contains the reference to the widgets inside the canvas
+	
+	const [activeSidebarWidget, setActiveSidebarWidget] = useState(null) // helps with the dnd overlay
 
-	const tabs = [
+	const sensors = useSensors(
+		useSensor(PointerSensor)
+	)
+
+	const sidebarTabs = [
 		{
 			name: "Widgets",
 			icon: <LayoutFilled />,
-			content: <WidgetsContainer />
+			content: <WidgetsContainer onWidgetsUpdate={(widgets) => setSidebarWidgets(widgets)}/>
 		},
 		{
 			name: "Extensions",
@@ -32,15 +43,56 @@ function App() {
 		}
 	]
 
+	const handleDragStart = (event) => {
+		console.log("Dragging", event.active)
+		const draggedItem = sidebarWidgets.find((item) => item.name === event.active.id)
+		setActiveSidebarWidget(draggedItem)
+	}
+
+	const handleDragMove = (event) => {
+	}
+
+	const handleDragEnd = (event) => {
+		// add items to canvas from sidebar
+		const widgetItem = event.active.data.current?.title
+
+		if (event.over?.id !== "cart-droppable" || !widgetItem) return
+		// const temp = [...widgets]
+		// temp.push(widgetItem)
+		// setCanvasWidgets(temp)	
+		setActiveSidebarWidget(null)
+
+	}
+
+
 	return (
 		<div className="tw-w-full tw-h-[100vh] tw-flex tw-flex-col tw-bg-primaryBg">
 			<Header className="tw-h-[6vh]"/>
-			<div className="tw-w-full tw-h-[94vh] tw-flex">
-				<Sidebar tabs={tabs}/>
-				<Canvas />
-			</div>
+			
+			<DndContext sensors={sensors} collisionDetection={closestCorners}
+					onDragStart={handleDragStart}
+					onDragMove={handleDragMove}
+					onDragEnd={handleDragEnd}
+				>
+				<div className="tw-w-full tw-h-[94vh] tw-flex">
+					<Sidebar tabs={sidebarTabs}/>
+					<Canvas widgets={canvasWidgets}/>
+				</div>
+
+				{/* dragOverlay (dnd-kit) helps move items from one container to another */}
+				<DragOverlay>
+					{activeSidebarWidget ? (
+							<DraggableWidgetCard name={activeSidebarWidget.name}
+												 img={activeSidebarWidget.img}
+												 url={activeSidebarWidget.url}
+												/> 
+							): 
+					null}
+				</DragOverlay>
+
+			</DndContext>
 		</div>
-	);
+	)
 }
 
 export default App;