Implement add task button functionality

client/src/app/page.tsx

@@ -4,6 +4,7 @@ import Board from '@/components/Board';
 import Navbar from '@/components/Navbar';
 import Toolbar from '@/components/Toolbar';
 import TaskDetails from '@/components/TaskDetails';
+import Task from '@/components/Task'
 
 export default function Home() {
   // State to control whether the popup is visible
@@ -15,12 +16,10 @@ export default function Home() {
   };
 
   return (
-    <div className="relative">
+    <div className="absolute top-0 left-0 z-10 h-screen w-screen overflow-hidden bg-white">
       <Board />
       <Navbar />
-      <Toolbar />
-      <div>
-      </div>
+
     </div>
   );
 }

client/src/components/Board/index.tsx

@@ -2,82 +2,76 @@
 import { useEffect, useState } from 'react';
 import Task from '@/components/Task';
 import './styles.css';
+import Toolbar from '@/components/Toolbar'
 
 interface BoardViewState {
   offsetX: number;
   offsetY: number;
   zoom: number;
 };
 
-const tasks = [
-  {
-    id: 1,
-    title: 'Gather wood',
-    description: 'Example description!',
-    width: 200,
-    height: 100,
-    posX: 200,
-    posY: 350,
-    color: "#f7d9c4"
-  },
-  {
-    id: 2,
-    title: 'Build door',
-    width: 200,
-    height: 100,
-    posX: 500,
-    posY: 300,
-    color: "#faedcb"
-  },
-  {
-    id: 3,
-    title: 'Build walls',
-    width: 200,
-    height: 100,
-    posX: 500,
-    posY: 450,
-    color: "#faedcb"
-  },
-  {
-    id: 4,
-    title: 'Find cool tree',
-    width: 200,
-    height: 100,
-    posX: 300,
-    posY: 100,
-    color: "#f7d9c4"
-  },
-  {
-    id: 5,
-    title: 'Assemble treehouse',
-    width: 200,
-    height: 100,
-    posX: 800,
-    posY: 250,
-    color: "#c9e4de"
-  },
-];
-
 export default function Board() {
   const [board_view_state, setBoardViewState] = useState<BoardViewState>({
     offsetX: 0,
     offsetY: 0,
     zoom: 1.0,
   });
+
+  const [tasks, setTaskList] = useState([
+      {
+        id: 1,
+        title: 'Assemble treehouse',
+        width: 200,
+        height: 100,
+        posX: 800,
+        posY: 250,
+        color: "#c9e4de"
+      }, 
+      {
+        id: 2,
+        title: 'Find wood',
+        width: 200,
+        height: 100,
+        posX: 400,
+        posY: 250,
+        color: "#c9e4de"
+
+      }
+  ]);
+
+
+  const handleAddTask = () => {
+    var newTasks = tasks.slice();
+    newTasks.push({
+      id: tasks.length + 1,
+      title: 'Untitled',
+      width: 200,
+      height: 100,
+      posX: 50,
+      posY: 150,
+      color: "#faedcb"
+
+      });
+    console.log(newTasks.length);
+    setTaskList(newTasks);
+  };
+
+
   return (
     <div className="absolute top-0 left-0 z-10 h-screen w-screen overflow-hidden bg-white">
+      <Toolbar addTask={handleAddTask}/>
       <div
         style={{ zoom: board_view_state.zoom }}
         // className="board-bg-grid bg-white absolute left-1/2 top-1/2"
-        className="board-bg-grid bg-white absolute h-full w-full"
-      >
+        className="board-bg-grid bg-white absolute h-full w-full">
+        
         {tasks.map((task, idx) => (
-          <Task
-            key={idx}
-            task={task}
+          <Task key={idx}
+                task={task}
           />
-        ))}
+      ))}
       </div>
     </div>
+
   );
 };

client/src/components/Board/styles.css

@@ -3,3 +3,15 @@
   background-image: radial-gradient(circle, #c8c8c8 2px, rgba(0, 0, 0, 0) 2px);
   background-position: left 25px top 25px;
 }
+
+.rectangle {
+  position: fixed;
+  top: 100;
+  left: 100;
+  background-color: rgba(239, 224, 255);
+  border-radius: 12px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+}

client/src/components/Toolbar/index.tsx

@@ -1,5 +1,9 @@
 "use client";
 import React from 'react';
+import Task from '@/components/Task';
+import setTaskList from '../Board/index.tsx';
+import taskList from '../Board/index.tsx'
+import Board from '@/components/Board'
 import { Button, IconButton, ButtonGroup, ButtonToolbar } from 'rsuite';
 import {
   ArrowFlowUpRight24Regular,
@@ -10,7 +14,11 @@ import {
 
 import styles from './Toolbar.module.css';
 
-export default function Toolbar() {
+interface toolbarProps {
+  addTask: ()=>void
+}
+
+export default function Toolbar({ addTask = () => {}}: toolbarProps) {
   const changeCursor = (cursorType: string) => {
     document.body.style.cursor = cursorType;
   };
@@ -33,11 +41,13 @@ export default function Toolbar() {
           appearance='primary'
           color='blue'
           size='lg'
+          onClick={() => addTask()}
         />
         <IconButton icon={<ArrowFlowUpRight24Regular />} 
           appearance='primary'
           color='blue'
           size='lg'
+
         />
       </div>
     </div>