Add initial widget functionality using react-grid-layout and react-resizable

client/src/App.jsx

@@ -1,6 +1,7 @@
 import { useState } from 'react'
 import Header from './components/header.jsx';
 import Sidebar from './components/sidebar.jsx';
+import Widget from './components/Widget.jsx'
 import { Grid, GridItem } from "@chakra-ui/react"
 import { Box } from "@chakra-ui/react"
 
@@ -25,7 +26,7 @@ function App() {
           height="100%"
           width="100%"
           >
-          {/* <Widgets></Widgets> */}
+          <Widget />
         </Grid>
       </GridItem>
     </Grid>

client/src/components/Widget.jsx

@@ -0,0 +1,52 @@
+import { useState } from 'react';
+import GridLayout from 'react-grid-layout';
+
+export default function Widget() {
+    // Define widgets initial position and size 
+    const [layout, setLayout] = useState([
+        { i: 'myWidget1', x: 0, y: 0, w: 3, h: 3, minH: 3, static: false },
+        { i: 'myWidget2', x: 3, y: 0, w: 3, h: 3, minH: 3, static: false },
+        { i: 'myWidget3', x: 6, y: 0, w: 3, h: 3, minH: 3, static: false }
+    ]);
+
+    const onLayoutChange = (newLayout) => { 
+        setLayout(newLayout);
+        console.log('Updated layout:', newLayout)
+    };
+
+    return (
+        <GridLayout
+            className="layout"
+            layout={layout}
+            cols={12} // Total columns in grid
+            rowHeight={30} //Height of a single row in px
+            width={1200} // Total width of the grid
+            margin={[10, 10]} // [horizontal, vertical] gap
+            onLayoutChange={onLayoutChange}
+            draggableHandle=".widget-handle" // Make only the header draggable
+        >
+            <div key="myWidget1" style={{ background: '#f0f0f0', borderRadius: 4 }}>
+                <div className="widget-handle" style={{ padding: '4px', cursor: 'move', background: '#ddd' }}>
+                    VDAP Widget
+                </div>
+                <div style={{ padding: '8px' }}>
+                    This is the widget content - drag or resize me!
+                </div>
+            </div><div key="myWidget2" style={{ background: '#f0f0f0', borderRadius: 4 }}>
+                <div className="widget-handle" style={{ padding: '4px', cursor: 'move', background: '#ddd' }}>
+                    VDAP Widget
+                </div>
+                <div style={{ padding: '8px' }}>
+                    This is the widget content - drag or resize me!
+                </div>
+            </div><div key="myWidget3" style={{ background: '#f0f0f0', borderRadius: 4 }}>
+                <div className="widget-handle" style={{ padding: '4px', cursor: 'move', background: '#ddd' }}>
+                    VDAP Widget
+                </div>
+                <div style={{ padding: '8px' }}>
+                    This is the widget content - drag or resize me!
+                </div>
+            </div>
+        </GridLayout>
+    );
+}

client/src/components/sidebar.jsx

@@ -1,7 +1,7 @@
 import { Box, Button, createIcon, CloseButton, IconButton, Stack } from "@chakra-ui/react";
 import { FaVolcano } from "react-icons/fa6";
 import { RxHamburgerMenu } from "react-icons/rx";
-import { useState } from "react"
+import { useState } from "react";
 
 // ICONS
 export const PushPin = createIcon({

client/src/main.jsx

@@ -2,6 +2,8 @@ import { Provider } from "./components/ui/provider"
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import './index.css'
+import 'react-grid-layout/css/styles.css'
+import 'react-resizable/css/styles.css'
 import App from './App.jsx'
 
 createRoot(document.getElementById('root')).render(