From 67286f14bba16b941060e0e9e51233c2696d637d Mon Sep 17 00:00:00 2001
From: Sasan Salehzadeh <sasanqc@gmail.com>
Date: Thu, 15 Jun 2023 16:08:13 +0430
Subject: [PATCH] Create board js

---
 components/BoardsList.tsx   |  50 +++--
 components/CreateBoard.tsx  |  90 +++++---
 components/MobileBoards.tsx |   2 +-
 components/TaskColumn.tsx   |  77 ++-----
 components/ToggleTheme.tsx  |  22 +-
 components/UI/Modal.tsx     |  28 ++-
 components/UI/Select.tsx    |  29 ++-
 components/UI/TextInput.tsx |  32 ++-
 data/data.json              | 430 ++++++++++++++++++++++++++++++++++++
 icons/LogoDark.tsx          |  16 --
 layout/Sidebar.tsx          |  15 +-
 layout/Tasks.tsx            |  14 +-
 model/Board.tsx             |   7 +
 model/BoardListProps.tsx    |   7 +
 model/Subtask.tsx           |   5 +
 model/Task.tsx              |   9 +
 next.config.js              |   2 +-
 package-lock.json           |  33 ++-
 pages/index.tsx             |  45 +++-
 styles/globals.css          |   4 +-
 20 files changed, 745 insertions(+), 172 deletions(-)
 create mode 100644 data/data.json
 delete mode 100644 icons/LogoDark.tsx
 create mode 100644 model/Board.tsx
 create mode 100644 model/BoardListProps.tsx
 create mode 100644 model/Subtask.tsx
 create mode 100644 model/Task.tsx

diff --git a/components/BoardsList.tsx b/components/BoardsList.tsx
index 91f1a89..ebb7f2b 100644
--- a/components/BoardsList.tsx
+++ b/components/BoardsList.tsx
@@ -1,29 +1,37 @@
 import React from "react";
 import BoardIcon from "@/icons/icon-board.svg";
-const BoardsList = () => {
+import BoardListProps from "@/model/BoardListProps";
+const BoardsList: React.FC<BoardListProps> = ({
+  boards,
+  activeBoard = 0,
+  onChangedaActiveBoard,
+  onAddNewBoard,
+}) => {
   return (
     <div>
-      <h4 className="text-gray3 pl-8 mb-5 mt-4">all boards (3)</h4>
+      <h4 className="text-gray3 pl-8 mb-5 mt-4">
+        all boards ({boards.length})
+      </h4>
       <ul>
-        <li className=" flex pl-8 py-4 gap-x-4 mr-6 items-center text-white bg-primary2 rounded-r-full ">
-          <span>
-            <BoardIcon />
-          </span>
-          <h3>Platform Launch</h3>
-        </li>
-        <li className=" flex pl-8 py-4 gap-x-4 mr-6 items-center text-gray3  rounded-r-full ">
-          <span>
-            <BoardIcon />
-          </span>
-          <h3>Marketing Plan</h3>
-        </li>
-        <li className=" flex pl-8 py-4 gap-x-4 mr-6 items-center text-gray3  rounded-r-full ">
-          <span>
-            <BoardIcon />
-          </span>
-          <h3>Roadmap</h3>
-        </li>
-        <li className=" flex pl-8 py-4 gap-x-4 mr-6 items-center text-primary2  rounded-r-full ">
+        {boards.map((board, i) => (
+          <li
+            key={i}
+            className={`flex pl-8 py-4 gap-x-4 mr-6 items-center   rounded-r-full cursor-pointer  ${
+              activeBoard === i ? "bg-primary2 text-white" : "text-gray3"
+            }`}
+            onClick={() => onChangedaActiveBoard(i)}
+          >
+            <span>
+              <BoardIcon />
+            </span>
+            <h3>{board.name}</h3>
+          </li>
+        ))}
+
+        <li
+          className=" flex pl-8 py-4 gap-x-4 mr-6 items-center text-primary2  rounded-r-full cursor-pointer"
+          onClick={onAddNewBoard}
+        >
           <span>
             <BoardIcon />
           </span>
diff --git a/components/CreateBoard.tsx b/components/CreateBoard.tsx
index b8a9bc7..8244388 100644
--- a/components/CreateBoard.tsx
+++ b/components/CreateBoard.tsx
@@ -1,53 +1,77 @@
+import { useState } from "react";
 import TextInput from "./UI/TextInput";
 import CrossIcon from "@/icons/icon-cross.svg";
 import Button from "./UI/Button";
-import Select from "./UI/Select";
+
 const CreateBoard = () => {
+  const [columns, setColumns] = useState(["", ""]);
+  const [name, setName] = useState("");
+
+  const handleDeleteColumn = (e: MouseEvent, index: number) => {
+    e.stopPropagation();
+    const updatedColumns = [...columns];
+    updatedColumns.splice(index, 1);
+    setColumns(updatedColumns);
+  };
+
+  const onChangedName = (e: React.FormEvent<HTMLInputElement>) => {
+    setName((e.target as HTMLInputElement).value);
+  };
+
+  const handleChangedColumn = (
+    e: React.FormEvent<HTMLInputElement>,
+    index: number
+  ) => {
+    const updatedColumns = [...columns];
+    updatedColumns[index] = (e.target as HTMLInputElement).value;
+    setColumns(updatedColumns);
+  };
+
+  const onCreateNewBoard = () => {};
   return (
     <div className="modal-content space-y-6 ">
-      <h2 className="text-black4 ">Add New Board</h2>
-
-      <TextInput label={"Name"} placeholder={"e.g. Web Design"} name={"name"} />
-      <div className="mt-2 space-y-3 ">
+      <h2 className="text-black4 dark:text-white">Add New Board</h2>
+      <TextInput
+        label={"Name"}
+        placeholder={"e.g. Web Design"}
+        name={"name"}
+        value={name}
+        onChange={onChangedName}
+      />
+      <div className="mt-2 space-y-2 ">
         <label htmlFor="title" className="block  text-gray3 text-sm font-bold">
           Columns
         </label>
-        <div className="flex items-center">
-          <Select
-            items={[
-              { label: "Todo", value: "todo" },
-              { label: "Doing", value: "doing" },
-              { label: "Done", value: "done" },
-            ]}
-            onChanged={() => {}}
-          />
-          <div className="ml-4 cursor-pointer">
-            <CrossIcon />
-          </div>
-        </div>
-        <div className="flex items-center ">
-          <Select
-            items={[
-              { label: "Todo", value: "todo" },
-              { label: "Doing", value: "doing" },
-              { label: "Done", value: "done" },
-            ]}
-            onChanged={() => {}}
-          />
-          <div className="ml-4 cursor-pointer">
-            <CrossIcon />
-          </div>
-        </div>
+        <ul className="space-y-2 ">
+          {columns.map((col, index) => (
+            <li className="flex items-center " key={index}>
+              <TextInput
+                placeholder={"e.g. TODO"}
+                name={"name"}
+                onChange={(e: React.FormEvent<HTMLInputElement>) =>
+                  handleChangedColumn(e, index)
+                }
+                value={columns[index]}
+              />
+              <div className="ml-4 cursor-pointer">
+                <CrossIcon
+                  onClick={(e: MouseEvent) => handleDeleteColumn(e, index)}
+                />
+              </div>
+            </li>
+          ))}
+        </ul>
+
         <Button
           type={"small secondary"}
           classes="w-full"
           label="+ Add New Column"
-          onClick={() => {}}
+          onClick={() => setColumns((prev) => [...prev, ""])}
         />
       </div>
       <Button
         label="Create New Board"
-        onClick={() => {}}
+        onClick={onCreateNewBoard}
         classes={"w-full"}
         type={"primary small"}
       />
diff --git a/components/MobileBoards.tsx b/components/MobileBoards.tsx
index 87bad04..2b93eab 100644
--- a/components/MobileBoards.tsx
+++ b/components/MobileBoards.tsx
@@ -4,7 +4,7 @@ import ToggleTheme from "./ToggleTheme";
 const MobileBoards = () => {
   return (
     <div className="bg-white rounded-md pt-2 mx-7">
-      <BoardsList />
+      {/* <BoardsList /> */}
       <div className="p-4">
         <ToggleTheme />
       </div>
diff --git a/components/TaskColumn.tsx b/components/TaskColumn.tsx
index fbf413b..15a5caa 100644
--- a/components/TaskColumn.tsx
+++ b/components/TaskColumn.tsx
@@ -1,62 +1,33 @@
-const TaskColumn = () => {
+import Task from "@/model/Task";
+
+interface TaskColumnProps {
+  col: { name: string; tasks: Task[] };
+}
+const TaskColumn: React.FC<TaskColumnProps> = ({ col }) => {
+  const doneSubtasksNumber = (task: Task) => {
+    return task.subtasks.filter((el) => el.isCompleted).length;
+  };
   return (
     <div className="w-[280px] shrink-0 h-full">
       <div className="flex mb-6">
         <div className="w-4 h-4 bg-primary2 rounded-full inline-block mr-3"></div>
-        <h4 className="text-gray3">todo (4)</h4>
+        <h4 className="text-gray3">
+          {col.name} ({col.tasks.length})
+        </h4>
       </div>
       <ul className="space-y-5 pb-6 ">
-        <li>
-          <section className="py-6 px-4 bg-white dark:bg-black2 rounded-lg shadow-task">
-            <h3 className="mb-2">
-              Build UI for onboarding flow.Build UI for onboarding flow .Build
-              UI for onboarding flow
-            </h3>
-            <p className="text-sm text-gray3  font-bold ">
-              Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit vel,
-              voluptatum libero dolorum repudiandae nisi ducimus facilis. Illum,
-              provident tempore.
-            </p>
-          </section>
-        </li>
-        <li>
-          <section className="py-6 px-4 bg-white dark:bg-black2 rounded-lg shadow-task">
-            <h3 className="mb-2">Build UI for onboarding flow</h3>
-            <p className="text-sm text-gray3  font-bold ">0 of 3 substasks</p>
-          </section>
-        </li>
-        <li>
-          <section className="py-6 px-4 bg-white dark:bg-black2 rounded-lg shadow-task">
-            <h3 className="mb-2">
-              Build UI for onboarding flow.Build UI for onboarding flow .Build
-              UI for onboarding flow
-            </h3>
-            <p className="text-sm text-gray3  font-bold ">
-              Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit vel,
-              voluptatum libero dolorum repudiandae nisi ducimus facilis. Illum,
-              provident tempore.
-            </p>
-          </section>
-        </li>
-        <li>
-          <section className="py-6 px-4 bg-white dark:bg-black2 rounded-lg shadow-task">
-            <h3 className="mb-2">
-              Build UI for onboarding flow.Build UI for onboarding flow .Build
-              UI for onboarding flow
-            </h3>
-            <p className="text-sm text-gray3  font-bold ">
-              Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit vel,
-              voluptatum libero dolorum repudiandae nisi ducimus facilis. Illum,
-              provident tempore.
-            </p>
-          </section>
-        </li>
-        <li>
-          <section className="py-6 px-4 bg-white  dark:bg-black2 rounded-lg shadow-task">
-            <h3 className="mb-2">Build UI for onboarding flow</h3>
-            <p className="text-sm text-gray3  font-bold ">0 of 3 substasks</p>
-          </section>
-        </li>
+        {col.tasks.map((task, index) => (
+          <li key={index}>
+            <section className="py-6 px-4 bg-white dark:bg-black2 rounded-lg shadow-task">
+              <h3 className="mb-2">{task.title}</h3>
+              <p className="text-sm text-gray3  font-bold ">
+                {`${doneSubtasksNumber(task)} of ${
+                  task.subtasks.length
+                } subtasks`}
+              </p>
+            </section>
+          </li>
+        ))}
       </ul>
     </div>
   );
diff --git a/components/ToggleTheme.tsx b/components/ToggleTheme.tsx
index 52c1113..635a16b 100644
--- a/components/ToggleTheme.tsx
+++ b/components/ToggleTheme.tsx
@@ -1,12 +1,30 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
 import DarkThemeIcon from "@/icons/icon-dark-theme.svg";
 import LightThemeIcon from "@/icons/icon-light-theme.svg";
+
 const ToggleTheme = () => {
+  const [toggle, setToggle] = useState("light");
+  const handleChangedTheme = () => {
+    const html = document.querySelector("html");
+    html?.classList.toggle("dark");
+    localStorage.setItem("theme", toggle === "dark" ? "light" : "dark");
+    setToggle(toggle === "dark" ? "light" : "dark");
+  };
+  useEffect(() => {
+    setToggle(localStorage.getItem("theme") || "light");
+    return () => {};
+  }, []);
+
   return (
     <div className="bg-white2 dark:bg-black3 w-full flex items-center  py-4 justify-center rounded-md gap-x-6">
       <LightThemeIcon />
       <label className="relative inline-flex items-center cursor-pointer">
-        <input type="checkbox" value="" className="sr-only peer"></input>
+        <input
+          type="checkbox"
+          checked={toggle === "dark"}
+          onChange={handleChangedTheme}
+          className="sr-only peer"
+        ></input>
         <div className="w-10 h-5 bg-gray-200 peer-focus:outline-none rounded-full  dark:bg-gray-700 peer-checked:after:translate-x-5 after:content-[''] after:absolute after:top-[3px] after:left-[3px] after:bg-white   after:rounded-full after:h-[14px] after:w-[14px] after:transition-all  bg-primary2"></div>
       </label>
       <DarkThemeIcon />
diff --git a/components/UI/Modal.tsx b/components/UI/Modal.tsx
index e1d3e4e..73f09ca 100644
--- a/components/UI/Modal.tsx
+++ b/components/UI/Modal.tsx
@@ -1,15 +1,39 @@
+import { useEffect, useRef, useCallback } from "react";
 interface ModalProps {
   children: React.ReactNode;
   center?: boolean;
+  onClickBackdrop: () => void;
 }
 
-const Modal: React.FC<ModalProps> = ({ children, center = true }) => {
+const Modal: React.FC<ModalProps> = ({
+  children,
+  center = true,
+  onClickBackdrop,
+}) => {
+  const modalRef = useRef<HTMLDivElement>(null);
+
+  const backDropHandler = useCallback((e: MouseEvent) => {
+    if (!modalRef?.current?.contains(e.target as Node)) {
+      console.log("on click on backdrop");
+      onClickBackdrop();
+    }
+  }, []);
+
+  useEffect(() => {
+    setTimeout(() => {
+      window.addEventListener("click", backDropHandler);
+    });
+    return () => {
+      window.removeEventListener("click", backDropHandler);
+    };
+  }, []);
   return (
-    <div className=" w-screen h-screen absolute top-0 left-0 z-50 bg-[#00000080]">
+    <div className=" w-screen h-screen absolute top-0 left-0 z-10 bg-[#00000080]">
       <div
         className={`w-full  md:w-fit  md:left-1/2 absolute md:-translate-x-1/2 px-4 ${
           center ? "top-1/2 -translate-y-1/2" : "top-24"
         }`}
+        ref={modalRef}
       >
         {children}
       </div>
diff --git a/components/UI/Select.tsx b/components/UI/Select.tsx
index 144fc59..9713bcb 100644
--- a/components/UI/Select.tsx
+++ b/components/UI/Select.tsx
@@ -1,4 +1,4 @@
-import { useState, useRef, useEffect } from "react";
+import { useState, useRef, useEffect, useCallback } from "react";
 import ChevronDownIcon from "@/icons/icon-chevron-down.svg";
 
 interface SelectProps {
@@ -16,7 +16,8 @@ const Select: React.FC<SelectProps> = ({ items, label, onChanged }) => {
     setIsOpen(true);
   };
 
-  const handleSelectedItem = (e: React.MouseEvent<HTMLUListElement>) => {
+  const handleSelectedItem = (e: MouseEvent) => {
+    e.stopPropagation();
     const value = (e.target as HTMLElement).getAttribute("data-value");
 
     if (value) {
@@ -25,16 +26,22 @@ const Select: React.FC<SelectProps> = ({ items, label, onChanged }) => {
       onChanged(value);
     }
   };
+  const handleClickOnWindow = useCallback((e: MouseEvent) => {
+    if (
+      dropDownRef.current &&
+      !dropDownRef.current.contains(e.target as Node)
+    ) {
+      setIsOpen(false);
+    }
+  }, []);
+
   useEffect(() => {
-    window.document.addEventListener("click", (e: MouseEvent) => {
-      if (
-        dropDownRef.current &&
-        !dropDownRef.current.contains(e.target as Node)
-      ) {
-        setIsOpen(false);
-      }
+    window.addEventListener("click", handleClickOnWindow, {
+      capture: false,
     });
-    return () => {};
+    return () => {
+      window.removeEventListener("click", handleClickOnWindow);
+    };
   }, []);
 
   return (
@@ -50,7 +57,7 @@ const Select: React.FC<SelectProps> = ({ items, label, onChanged }) => {
       </div>
       {isOpen && (
         <ul
-          className="bg-white p-4 text-gray3 absolute mt-2 rounded-lg w-full space-y-2 z-20"
+          className="bg-white dark:bg-black3 p-4 text-gray3 absolute mt-2 rounded-lg w-full space-y-2 z-20"
           onClick={handleSelectedItem}
         >
           {items.map((el) => (
diff --git a/components/UI/TextInput.tsx b/components/UI/TextInput.tsx
index 007e994..36f2120 100644
--- a/components/UI/TextInput.tsx
+++ b/components/UI/TextInput.tsx
@@ -1,20 +1,36 @@
 interface TextInputProps {
-  label: string;
+  label?: string;
   name: string;
-  placeholder: string;
+  placeholder?: string;
+  value: string;
+  error?: string;
+  onChange: (e: React.FormEvent<HTMLInputElement>) => void;
 }
-const TextInput: React.FC<TextInputProps> = ({ label, name, placeholder }) => {
+const TextInput: React.FC<TextInputProps> = ({
+  label,
+  name,
+  placeholder,
+  value,
+  onChange,
+}) => {
   return (
-    <div className="">
-      <label htmlFor={name} className="block  text-gray3 text-sm font-bold">
-        {label}
-      </label>
-      <div className="mt-2">
+    <div className="w-full">
+      {label && (
+        <label
+          htmlFor={name}
+          className="block mb-2 text-gray3 text-sm font-bold"
+        >
+          {label}
+        </label>
+      )}
+      <div className="">
         <input
           type="text"
           name={name}
+          value={value}
           className=""
           placeholder={placeholder}
+          onChange={onChange}
           required
         />
       </div>
diff --git a/data/data.json b/data/data.json
new file mode 100644
index 0000000..ba2d588
--- /dev/null
+++ b/data/data.json
@@ -0,0 +1,430 @@
+{
+  "boards": [
+    {
+      "name": "Platform Launch",
+      "columns": [
+        {
+          "name": "Todo",
+          "tasks": [
+            {
+              "title": "Build UI for onboarding flow",
+              "description": "",
+              "status": "Todo",
+              "subtasks": [
+                {
+                  "title": "Sign up page",
+                  "isCompleted": true
+                },
+                {
+                  "title": "Sign in page",
+                  "isCompleted": false
+                },
+                {
+                  "title": "Welcome page",
+                  "isCompleted": false
+                }
+              ]
+            },
+            {
+              "title": "Build UI for search",
+              "description": "",
+              "status": "Todo",
+              "subtasks": [
+                {
+                  "title": "Search page",
+                  "isCompleted": false
+                }
+              ]
+            },
+            {
+              "title": "Build settings UI",
+              "description": "",
+              "status": "Todo",
+              "subtasks": [
+                {
+                  "title": "Account page",
+                  "isCompleted": false
+                },
+                {
+                  "title": "Billing page",
+                  "isCompleted": false
+                }
+              ]
+            },
+            {
+              "title": "QA and test all major user journeys",
+              "description": "Once we feel version one is ready, we need to rigorously test it both internally and externally to identify any major gaps.",
+              "status": "Todo",
+              "subtasks": [
+                {
+                  "title": "Internal testing",
+                  "isCompleted": false
+                },
+                {
+                  "title": "External testing",
+                  "isCompleted": false
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "name": "Doing",
+          "tasks": [
+            {
+              "title": "Design settings and search pages",
+              "description": "",
+              "status": "Doing",
+              "subtasks": [
+                {
+                  "title": "Settings - Account page",
+                  "isCompleted": true
+                },
+                {
+                  "title": "Settings - Billing page",
+                  "isCompleted": true
+                },
+                {
+                  "title": "Search page",
+                  "isCompleted": false
+                }
+              ]
+            },
+            {
+              "title": "Add account management endpoints",
+              "description": "",
+              "status": "Doing",
+              "subtasks": [
+                {
+                  "title": "Upgrade plan",
+                  "isCompleted": true
+                },
+                {
+                  "title": "Cancel plan",
+                  "isCompleted": true
+                },
+                {
+                  "title": "Update payment method",
+                  "isCompleted": false
+                }
+              ]
+            },
+            {
+              "title": "Design onboarding flow",
+              "description": "",
+              "status": "Doing",
+              "subtasks": [
+                {
+                  "title": "Sign up page",
+                  "isCompleted": true
+                },
+                {
+                  "title": "Sign in page",
+                  "isCompleted": false
+                },
+                {
+                  "title": "Welcome page",
+                  "isCompleted": false
+                }
+              ]
+            },
+            {
+              "title": "Add search enpoints",
+              "description": "",
+              "status": "Doing",
+              "subtasks": [
+                {
+                  "title": "Add search endpoint",
+                  "isCompleted": true
+                },
+                {
+                  "title": "Define search filters",
+                  "isCompleted": false
+                }
+              ]
+            },
+            {
+              "title": "Add authentication endpoints",
+              "description": "",
+              "status": "Doing",
+              "subtasks": [
+                {
+                  "title": "Define user model",
+                  "isCompleted": true
+                },
+                {
+                  "title": "Add auth endpoints",
+                  "isCompleted": false
+                }
+              ]
+            },
+            {
+              "title": "Research pricing points of various competitors and trial different business models",
+              "description": "We know what we're planning to build for version one. Now we need to finalise the first pricing model we'll use. Keep iterating the subtasks until we have a coherent proposition.",
+              "status": "Doing",
+              "subtasks": [
+                {
+                  "title": "Research competitor pricing and business models",
+                  "isCompleted": true
+                },
+                {
+                  "title": "Outline a business model that works for our solution",
+                  "isCompleted": false
+                },
+                {
+                  "title": "Talk to potential customers about our proposed solution and ask for fair price expectancy",
+                  "isCompleted": false
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "name": "Done",
+          "tasks": [
+            {
+              "title": "Conduct 5 wireframe tests",
+              "description": "Ensure the layout continues to make sense and we have strong buy-in from potential users.",
+              "status": "Done",
+              "subtasks": [
+                {
+                  "title": "Complete 5 wireframe prototype tests",
+                  "isCompleted": true
+                }
+              ]
+            },
+            {
+              "title": "Create wireframe prototype",
+              "description": "Create a greyscale clickable wireframe prototype to test our asssumptions so far.",
+              "status": "Done",
+              "subtasks": [
+                {
+                  "title": "Create clickable wireframe prototype in Balsamiq",
+                  "isCompleted": true
+                }
+              ]
+            },
+            {
+              "title": "Review results of usability tests and iterate",
+              "description": "Keep iterating through the subtasks until we're clear on the core concepts for the app.",
+              "status": "Done",
+              "subtasks": [
+                {
+                  "title": "Meet to review notes from previous tests and plan changes",
+                  "isCompleted": true
+                },
+                {
+                  "title": "Make changes to paper prototypes",
+                  "isCompleted": true
+                },
+                {
+                  "title": "Conduct 5 usability tests",
+                  "isCompleted": true
+                }
+              ]
+            },
+            {
+              "title": "Create paper prototypes and conduct 10 usability tests with potential customers",
+              "description": "",
+              "status": "Done",
+              "subtasks": [
+                {
+                  "title": "Create paper prototypes for version one",
+                  "isCompleted": true
+                },
+                {
+                  "title": "Complete 10 usability tests",
+                  "isCompleted": true
+                }
+              ]
+            },
+            {
+              "title": "Market discovery",
+              "description": "We need to define and refine our core product. Interviews will help us learn common pain points and help us define the strongest MVP.",
+              "status": "Done",
+              "subtasks": [
+                {
+                  "title": "Interview 10 prospective customers",
+                  "isCompleted": true
+                }
+              ]
+            },
+            {
+              "title": "Competitor analysis",
+              "description": "",
+              "status": "Done",
+              "subtasks": [
+                {
+                  "title": "Find direct and indirect competitors",
+                  "isCompleted": true
+                },
+                {
+                  "title": "SWOT analysis for each competitor",
+                  "isCompleted": true
+                }
+              ]
+            },
+            {
+              "title": "Research the market",
+              "description": "We need to get a solid overview of the market to ensure we have up-to-date estimates of market size and demand.",
+              "status": "Done",
+              "subtasks": [
+                {
+                  "title": "Write up research analysis",
+                  "isCompleted": true
+                },
+                {
+                  "title": "Calculate TAM",
+                  "isCompleted": true
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "name": "Marketing Plan",
+      "columns": [
+        {
+          "name": "Todo",
+          "tasks": [
+            {
+              "title": "Plan Product Hunt launch",
+              "description": "",
+              "status": "Todo",
+              "subtasks": [
+                {
+                  "title": "Find hunter",
+                  "isCompleted": false
+                },
+                {
+                  "title": "Gather assets",
+                  "isCompleted": false
+                },
+                {
+                  "title": "Draft product page",
+                  "isCompleted": false
+                },
+                {
+                  "title": "Notify customers",
+                  "isCompleted": false
+                },
+                {
+                  "title": "Notify network",
+                  "isCompleted": false
+                },
+                {
+                  "title": "Launch!",
+                  "isCompleted": false
+                }
+              ]
+            },
+            {
+              "title": "Share on Show HN",
+              "description": "",
+              "status": "",
+              "subtasks": [
+                {
+                  "title": "Draft out HN post",
+                  "isCompleted": false
+                },
+                {
+                  "title": "Get feedback and refine",
+                  "isCompleted": false
+                },
+                {
+                  "title": "Publish post",
+                  "isCompleted": false
+                }
+              ]
+            },
+            {
+              "title": "Write launch article to publish on multiple channels",
+              "description": "",
+              "status": "",
+              "subtasks": [
+                {
+                  "title": "Write article",
+                  "isCompleted": false
+                },
+                {
+                  "title": "Publish on LinkedIn",
+                  "isCompleted": false
+                },
+                {
+                  "title": "Publish on Inndie Hackers",
+                  "isCompleted": false
+                },
+                {
+                  "title": "Publish on Medium",
+                  "isCompleted": false
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "name": "Doing",
+          "tasks": []
+        },
+        {
+          "name": "Done",
+          "tasks": []
+        }
+      ]
+    },
+    {
+      "name": "Roadmap",
+      "columns": [
+        {
+          "name": "Now",
+          "tasks": [
+            {
+              "title": "Launch version one",
+              "description": "",
+              "status": "",
+              "subtasks": [
+                {
+                  "title": "Launch privately to our waitlist",
+                  "isCompleted": false
+                },
+                {
+                  "title": "Launch publicly on PH, HN, etc.",
+                  "isCompleted": false
+                }
+              ]
+            },
+            {
+              "title": "Review early feedback and plan next steps for roadmap",
+              "description": "Beyond the initial launch, we're keeping the initial roadmap completely empty. This meeting will help us plan out our next steps based on actual customer feedback.",
+              "status": "",
+              "subtasks": [
+                {
+                  "title": "Interview 10 customers",
+                  "isCompleted": false
+                },
+                {
+                  "title": "Review common customer pain points and suggestions",
+                  "isCompleted": false
+                },
+                {
+                  "title": "Outline next steps for our roadmap",
+                  "isCompleted": false
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "name": "Next",
+          "tasks": []
+        },
+        {
+          "name": "Later",
+          "tasks": []
+        }
+      ]
+    }
+  ]
+}
\ No newline at end of file
diff --git a/icons/LogoDark.tsx b/icons/LogoDark.tsx
deleted file mode 100644
index 095f534..0000000
--- a/icons/LogoDark.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from "react";
-
-const LogoDark = (props) => {
-  return (
-    <svg width="10" height="8" xmlns="http://www.w3.org/2000/svg" {...props}>
-      <path
-        stroke="#FFF"
-        strokeWidth="2"
-        fill="none"
-        d="m1.276 3.066 2.756 2.756 5-5"
-      />
-    </svg>
-  );
-};
-
-export default LogoDark;
diff --git a/layout/Sidebar.tsx b/layout/Sidebar.tsx
index b3c8c59..5547fd8 100644
--- a/layout/Sidebar.tsx
+++ b/layout/Sidebar.tsx
@@ -1,11 +1,22 @@
 import BoardsList from "@/components/BoardsList";
 import ToggleTheme from "@/components/ToggleTheme";
 import HideIcon from "@/icons/icon-hide.svg";
+import BoardListProps from "@/model/BoardListProps";
 
-const Sidebar = () => {
+const Sidebar: React.FC<BoardListProps> = ({
+  boards,
+  onChangedaActiveBoard,
+  activeBoard,
+  onAddNewBoard,
+}) => {
   return (
     <div className="w-[260px] md:w-[300px] border-r border-r-gray1  dark:border-r-black1 relative  hidden sm:inline-block">
-      <BoardsList />
+      <BoardsList
+        boards={boards}
+        onChangedaActiveBoard={onChangedaActiveBoard}
+        activeBoard={activeBoard}
+        onAddNewBoard={onAddNewBoard}
+      />
       <div className="absolute bottom-12 w-full px-4 space-y-4">
         <ToggleTheme />
         <div className=" text-gray3 flex items-center gap-x-4 mx-auto  cursor-pointer">
diff --git a/layout/Tasks.tsx b/layout/Tasks.tsx
index aeba221..50ca835 100644
--- a/layout/Tasks.tsx
+++ b/layout/Tasks.tsx
@@ -1,13 +1,15 @@
 import TaskColumn from "@/components/TaskColumn";
 import Button from "@/components/UI/Button";
-const Tasks = () => {
+import Board from "@/model/Board";
+interface TasksProps {
+  board: Board;
+}
+const Tasks: React.FC<TasksProps> = ({ board }) => {
   return (
     <div className="flex-1 h-full  p-6 flex gap-6 overflow-auto flex-nowrap bg-white2 dark:bg-black3 border-t border-t-gray1 dark:border-t-black1">
-      <TaskColumn />
-      <TaskColumn />
-      <TaskColumn />
-      <TaskColumn />
-      <TaskColumn />
+      {board.columns.map((col, index) => (
+        <TaskColumn col={col} key={index} />
+      ))}
       <div className="bg-gray1 dark:bg-black2 text-center mt-10 flex rounded-md">
         <h1 className="text-gray3 w-[280px] my-auto">+ New Column</h1>
       </div>
diff --git a/model/Board.tsx b/model/Board.tsx
new file mode 100644
index 0000000..1418bf1
--- /dev/null
+++ b/model/Board.tsx
@@ -0,0 +1,7 @@
+import Task from "./Task";
+
+interface Board {
+  name: string;
+  columns: { name: string; tasks: Task[] }[];
+}
+export default Board;
diff --git a/model/BoardListProps.tsx b/model/BoardListProps.tsx
new file mode 100644
index 0000000..cef13d5
--- /dev/null
+++ b/model/BoardListProps.tsx
@@ -0,0 +1,7 @@
+interface BoardListProps {
+  boards: { name: string }[];
+  onChangedaActiveBoard: (acitve: number) => void;
+  activeBoard: number;
+  onAddNewBoard: () => void;
+}
+export default BoardListProps;
diff --git a/model/Subtask.tsx b/model/Subtask.tsx
new file mode 100644
index 0000000..2f18602
--- /dev/null
+++ b/model/Subtask.tsx
@@ -0,0 +1,5 @@
+interface Subtask {
+  title: string;
+  isCompleted: boolean;
+}
+export default Subtask;
diff --git a/model/Task.tsx b/model/Task.tsx
new file mode 100644
index 0000000..b65ba6b
--- /dev/null
+++ b/model/Task.tsx
@@ -0,0 +1,9 @@
+import Subtask from "./Subtask";
+
+interface Task {
+  title: string;
+  description: string;
+  status: string;
+  subtasks: Subtask[];
+}
+export default Task;
diff --git a/next.config.js b/next.config.js
index 572377e..89b4c64 100644
--- a/next.config.js
+++ b/next.config.js
@@ -1,6 +1,6 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-  reactStrictMode: true,
+  reactStrictMode: false,
   webpack(config) {
     // Grab the existing rule that handles SVG imports
     const fileLoaderRule = config.module.rules.find((rule) =>
diff --git a/package-lock.json b/package-lock.json
index 5cb8122..f31ca32 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7422,7 +7422,8 @@
       "version": "7.21.0-placeholder-for-preset-env.2",
       "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.0-placeholder-for-preset-env.2.tgz",
       "integrity": "sha512-SOSkfJDddaM7mak6cPEpswyTRnuRltl429hMraQEglW+OkovnCzsiszTmsrlY//qLFjCpQDFRvjdm2wA5pPm9w==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "@babel/plugin-proposal-unicode-property-regex": {
       "version": "7.18.6",
@@ -8574,49 +8575,57 @@
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-8.0.0.tgz",
       "integrity": "sha512-b9MIk7yhdS1pMCZM8VeNfUlSKVRhsHZNMl5O9SfaX0l0t5wjdgu4IDzGB8bpnGBBOjGST3rRFVsaaEtI4W6f7g==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "@svgr/babel-plugin-remove-jsx-attribute": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-remove-jsx-attribute/-/babel-plugin-remove-jsx-attribute-8.0.0.tgz",
       "integrity": "sha512-BcCkm/STipKvbCl6b7QFrMh/vx00vIP63k2eM66MfHJzPr6O2U0jYEViXkHJWqXqQYjdeA9cuCl5KWmlwjDvbA==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "@svgr/babel-plugin-remove-jsx-empty-expression": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-remove-jsx-empty-expression/-/babel-plugin-remove-jsx-empty-expression-8.0.0.tgz",
       "integrity": "sha512-5BcGCBfBxB5+XSDSWnhTThfI9jcO5f0Ai2V24gZpG+wXF14BzwxxdDb4g6trdOux0rhibGs385BeFMSmxtS3uA==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "@svgr/babel-plugin-replace-jsx-attribute-value": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-replace-jsx-attribute-value/-/babel-plugin-replace-jsx-attribute-value-8.0.0.tgz",
       "integrity": "sha512-KVQ+PtIjb1BuYT3ht8M5KbzWBhdAjjUPdlMtpuw/VjT8coTrItWX6Qafl9+ji831JaJcu6PJNKCV0bp01lBNzQ==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "@svgr/babel-plugin-svg-dynamic-title": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-svg-dynamic-title/-/babel-plugin-svg-dynamic-title-8.0.0.tgz",
       "integrity": "sha512-omNiKqwjNmOQJ2v6ge4SErBbkooV2aAWwaPFs2vUY7p7GhVkzRkJ00kILXQvRhA6miHnNpXv7MRnnSjdRjK8og==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "@svgr/babel-plugin-svg-em-dimensions": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-svg-em-dimensions/-/babel-plugin-svg-em-dimensions-8.0.0.tgz",
       "integrity": "sha512-mURHYnu6Iw3UBTbhGwE/vsngtCIbHE43xCRK7kCw4t01xyGqb2Pd+WXekRRoFOBIY29ZoOhUCTEweDMdrjfi9g==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "@svgr/babel-plugin-transform-react-native-svg": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-transform-react-native-svg/-/babel-plugin-transform-react-native-svg-8.0.0.tgz",
       "integrity": "sha512-UKrY3860AQICgH7g+6h2zkoxeVEPLYwX/uAjmqo4PIq2FIHppwhIqZstIyTz0ZtlwreKR41O3W3BzsBBiJV2Aw==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "@svgr/babel-plugin-transform-svg-component": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-transform-svg-component/-/babel-plugin-transform-svg-component-8.0.0.tgz",
       "integrity": "sha512-DFx8xa3cZXTdb/k3kfPeaixecQLgKh5NVBMwD0AQxOzcZawK4oo1Jh9LbrcACUivsCA7TLG8eeWgrDXjTMhRmw==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "@svgr/babel-preset": {
       "version": "8.0.0",
@@ -8804,7 +8813,8 @@
     "acorn-jsx": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
-      "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ=="
+      "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
+      "requires": {}
     },
     "ajv": {
       "version": "6.12.6",
@@ -9772,7 +9782,8 @@
     "eslint-plugin-react-hooks": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.6.0.tgz",
-      "integrity": "sha512-oFc7Itz9Qxh2x4gNHStv3BqJq54ExXmfC+a1NjAta66IAN87Wu0R/QArgIS9qKzX3dXKPI9H5crl9QchNMY9+g=="
+      "integrity": "sha512-oFc7Itz9Qxh2x4gNHStv3BqJq54ExXmfC+a1NjAta66IAN87Wu0R/QArgIS9qKzX3dXKPI9H5crl9QchNMY9+g==",
+      "requires": {}
     },
     "eslint-scope": {
       "version": "7.2.0",
diff --git a/pages/index.tsx b/pages/index.tsx
index e4e1539..b7d28ad 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,18 +1,57 @@
+import { useEffect } from "react";
 import Button from "@/components/UI/Button";
 import Checkbox from "@/components/UI/Checkbox";
 import Header from "@/layout/Header";
 import Sidebar from "@/layout/Sidebar";
 import Tasks from "@/layout/Tasks";
-export default function Home() {
+import data from "@/data/data.json";
+import { useState } from "react";
+import Board from "@/model/Board";
+import Modal from "@/components/UI/Modal";
+import CreateBoard from "@/components/CreateBoard";
+interface HomeProps {
+  data: { boards: Board[] };
+}
+const Home: React.FC<HomeProps> = ({ data }) => {
+  const [activeBoard, setActiveBoard] = useState(0);
+  const [newBoardModalIsOpen, setNewBoardModalIsOpen] = useState(false);
+  const handleAddNewBoard = () => {
+    setNewBoardModalIsOpen(true);
+  };
+  const handleChangeActiveBoard = (active: number) => {
+    setActiveBoard(active);
+  };
+  useEffect(() => {
+    const html = document.querySelector("html");
+    html?.classList.add(localStorage.getItem("theme") || "light");
+    return () => {};
+  }, []);
+
   return (
     <main className="text-black dark:text-white bg-white dark:bg-black2 w-screen h-screen flex">
       <div className="flex flex-col overflow-hidden flex-1">
         <Header />
         <div className="flex-1 flex overflow-auto w-full">
-          <Sidebar />
-          <Tasks />
+          <Sidebar
+            boards={data.boards.map((item: Board) => {
+              return { name: item.name };
+            })}
+            onAddNewBoard={handleAddNewBoard}
+            onChangedaActiveBoard={handleChangeActiveBoard}
+            activeBoard={activeBoard}
+          />
+          <Tasks board={data.boards[activeBoard]} />
         </div>
+        {newBoardModalIsOpen && (
+          <Modal onClickBackdrop={() => setNewBoardModalIsOpen(false)}>
+            <CreateBoard />
+          </Modal>
+        )}
       </div>
     </main>
   );
+};
+export default Home;
+export async function getStaticProps() {
+  return { props: { data } };
 }
diff --git a/styles/globals.css b/styles/globals.css
index fff6c64..f9e2caf 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -25,9 +25,9 @@
   }
 
   input[type="text"] {
-    @apply w-full border text-base border-gray2 focus:border-primary2 py-2 px-4 rounded-md outline-none  placeholder:text-black placeholder:opacity-25 focus:ring-0;
+    @apply w-full border text-base border-gray2 focus:border-primary2 py-2 px-4 rounded-md outline-none dark:bg-black2  dark:placeholder:text-gray3 placeholder:opacity-25 focus:ring-0;
   }
 }
 .modal-content {
-  @apply w-full md:min-w-[480px]  bg-white p-8 rounded-md;
+  @apply w-full md:min-w-[480px]  bg-white dark:bg-black2 p-8 rounded-md;
 }