Constructing kanban board.

frontend/package.json

@@ -11,6 +11,9 @@
   },
   "dependencies": {
     "@asseinfo/react-kanban": "^2.2.0",
+    "@dnd-kit/core": "^6.1.0",
+    "@dnd-kit/sortable": "^8.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@fullcalendar/core": "^6.1.9",

frontend/src/App.jsx

@@ -6,13 +6,10 @@ import LoginPage from './components/authentication/LoginPage';
 import SignUpPage from './components/authentication/SignUpPage';
 import NavBar from './components/nav/Navbar';
 import Home from './components/Home';
-<<<<<<< HEAD
 import ProfileUpdate from './components/ProfileUpdatePage';
 import Calendar from './components/calendar/calendar';
-=======
 import KanbanBoard from './components/kanbanBoard/kanbanBoard';
 
->>>>>>> 66f1b7dccc36c99d9cffb093d540378e717c2c89
 
 const App = () => {
     return (
@@ -28,11 +25,8 @@ const App = () => {
                         <Route path="/calendar" element={<Calendar/>}/>
                     </Routes>
         </div>
-<<<<<<< HEAD
+        {/* <IconSideNav /> */}
-=======
-        <IconSideNav />
         <KanbanBoard/>  
->>>>>>> 66f1b7dccc36c99d9cffb093d540378e717c2c89
         </BrowserRouter>
     );
 }

frontend/src/components/IconSideNav.jsx

@@ -1,6 +1,5 @@
 import { useState } from "react";
 import { AnimatePresence, motion } from "framer-motion";
-import { SiFramer, SiTailwindcss, SiReact, SiJavascript, SiCss3 } from "react-icons/si";
 import homeLogo from "../assets/home.png";
 import calendarLogo from "../assets/calendar.png";
 import planLogo from "../assets/planning.png";

frontend/src/components/icons/plusIcon.jsx

@@ -0,0 +1,22 @@
+import React from 'react';
+
+function PlusIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      strokeWidth={1.5}
+      stroke="currentColor"
+      className="w-6 h-6"
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M12 9v6m3-3H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"
+      />
+    </svg>
+  );
+}
+
+export default PlusIcon;

frontend/src/components/icons/trashIcon.jsx

@@ -0,0 +1,22 @@
+function TrashIcon() {
+    return (
+      h(
+        "svg",
+        {
+          xmlns: "http://www.w3.org/2000/svg",
+          fill: "none",
+          viewBox: "0 0 24 24",
+          strokeWidth: 1.5,
+          className: "w-6 h-6"
+        },
+        h("path", {
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          d: "M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"
+        })
+      )
+    );
+  }
+  
+  export default TrashIcon;
+  

frontend/src/components/kanbanBoard/columnContainer.jsx

@@ -1,9 +1,8 @@
 import { SortableContext, useSortable } from "@dnd-kit/sortable";
-import TrashIcon from "../icons/TrashIcon";
+import TrashIcon from "../icons/trashIcon";
-import { Column, Id, Task } from "../types";
 import { CSS } from "@dnd-kit/utilities";
 import { useMemo, useState } from "react";
-import PlusIcon from "../icons/PlusIcon";
+import PlusIcon from "../icons/plusIcon";
 import TaskCard from "./taskCard";
 
 function ColumnContainer({

frontend/src/components/kanbanBoard/kanbanBoard.jsx

@@ -1,13 +1,9 @@
-import PlusIcon from "../icons/PlusIcon";
+import PlusIcon from "../icons/plusIcon"
 import { useMemo, useState } from "react";
-import { Column, Id, Task } from "../types";
 import ColumnContainer from "./columnContainer";
 import {
   DndContext,   
-  DragEndEvent,
-  DragOverEvent,
   DragOverlay,
-  DragStartEvent,
   PointerSensor,
   useSensor,
   useSensors,

frontend/src/components/kanbanBoard/taskCard.jsx

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import TrashIcon from "../icons/TrashIcon";
+import TrashIcon from "../icons/trashIcon";
 import { useSortable } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";