[MAJOR][FIRSTCOMMIT] Add board, read board, tasks

src/components/TaskList/TaskList.tsx

@@ -0,0 +1,26 @@
+import { TaskItem } from "@components";
+import "./TaskList.component.scss"
+
+interface TaskListProps {
+  taskGroup: TaskGroup
+  type?: "default" | "add-new"
+}
+
+const TaskList = (props: TaskListProps): JSX.Element => {
+  const { taskGroup, type } = props;
+  // Generate a random pastel color for the list-color indicator
+  const randomColor = `hsl(${Math.floor(Math.random() * 360)}, 70%, 70%)`;
+  return <div className="c-TaskList h-100 mx-2">
+    {type === "add-new" ? <div className="c-TaskList__new flex-center h-100">
+      <span className="add-new-list-btn py-2 px-3 cursor-pointer">+ Add New List</span>
+    </div>
+      :
+      <>
+        <span className="list-header"><span className="list-color d-inline-block" style={{ backgroundColor: randomColor }} />{taskGroup.groupId} ({taskGroup.tasks.length})</span>
+        {taskGroup.tasks.map(task => <TaskItem key={task.id} task={task} />)}
+      </>
+    }
+  </div>
+}
+
+export default TaskList