Migracode|Afere Precious Onome|Task Manager Exercise.

web/src/App.jsx

@@ -1,9 +1,64 @@
-import { TaskList } from './components/domains/task/TaskList/TaskList';
+// import TaskItem from './components/domains/task/TaskItem/TaskItem';
+import NewTask from './components/domains/task/TaskItem/NewTask';
+import TaskList from './components/domains/task/TaskList/TaskList';
+import { useState } from 'react';
 
 function App() {
+  const [taskInform, setTaskInform] = useState([
+    {
+      id: 1,
+      ProjectName: 'Re-work UI/UX',
+      Priority: 'low',
+      DueDate: '12/05/2025',
+      Assignee: 'Said & Rachel',
+      Project: 'Time App',
+    },
+    {
+      id: 2,
+      ProjectName: 'Dark mode toggle',
+      Priority: 'high',
+      DueDate: '09/03/2025',
+      Assignee: 'Umair & Precious',
+      Project: 'Asa Dark-mode Feature',
+    },
+    {
+      id: 3,
+      ProjectName: 'Accessibility check',
+      Priority: 'medium',
+      DueDate: '15/04/2025',
+      Assignee: 'Michel & Ricardo',
+      Project: 'Timer App',
+    },
+    {
+      id: 4,
+      ProjectName: 'Notification Integration',
+      Priority: 'high',
+      DueDate: '11/03/2025',
+      Assignee: 'Ebetsam & Deborah',
+      Project: 'Timer App',
+    },
+  ]);
+  function newTaskList(event, ProjectName, Project, Assignee) {
+    event.preventDefault();
+    setTaskInform((prevtask) => [
+      ...prevtask,
+      {
+        id: 5,
+        ProjectName,
+        DueDate: new Date().toLocaleDateString(),
+        Project,
+        Assignee,
+        Priority: 'high',
+      },
+    ]);
+  }
   return (
     <>
-      <TaskList />
+      <h1>Task Manager</h1>
+      {/* <TaskItem /> */}
+
+      <TaskList tasks={taskInform} />
+      <NewTask submit={newTaskList} />
     </>
   );
 }

web/src/components/domains/task/TaskItem/MyIconSunset.jsx

@@ -0,0 +1,75 @@
+const MyIconSunset = () => (
+  <svg
+    width="18"
+    height="18"
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g clipPath="url(#clip0_2106_309)">
+      <path
+        d="M14.1666 15C14.1666 13.8949 13.7276 12.8351 12.9462 12.0537C12.1648 11.2723 11.105 10.8333 9.99992 10.8333C8.89485 10.8333 7.83504 11.2723 7.05364 12.0537C6.27224 12.8351 5.83325 13.8949 5.83325 15"
+        stroke="black"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M10 7.5V1.66666"
+        stroke="black"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M3.5166 8.51667L4.69993 9.7"
+        stroke="black"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M0.833252 15H2.49992"
+        stroke="black"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M17.5 15H19.1667"
+        stroke="black"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M15.3 9.7L16.4834 8.51667"
+        stroke="black"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M19.1666 18.3333H0.833252"
+        stroke="black"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M13.3334 4.16666L10.0001 7.5L6.66675 4.16666"
+        stroke="black"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_2106_309">
+        <rect width="18" height="18" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+);
+
+export default MyIconSunset;