initial ui without logic

components/BoardsList.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import BoardIcon from "@/icons/icon-board.svg";
+const BoardsList = () => {
+  return (
+    <div>
+      <h4 className="text-gray3 pl-8 mb-5 mt-4">all boards (3)</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 ">
+          <span>
+            <BoardIcon />
+          </span>
+          <h3>+ Create New Board</h3>
+        </li>
+      </ul>
+    </div>
+  );
+};
+
+export default BoardsList;

components/CreateBoard.tsx

@@ -0,0 +1,58 @@
+import TextInput from "./UI/TextInput";
+import CrossIcon from "@/icons/icon-cross.svg";
+import Button from "./UI/Button";
+import Select from "./UI/Select";
+const CreateBoard = () => {
+  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 ">
+        <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>
+        <Button
+          type={"small secondary"}
+          classes="w-full"
+          label="+ Add New Column"
+          onClick={() => {}}
+        />
+      </div>
+      <Button
+        label="Create New Board"
+        onClick={() => {}}
+        classes={"w-full"}
+        type={"primary small"}
+      />
+    </div>
+  );
+};
+
+export default CreateBoard;

components/CreateTask.tsx

@@ -0,0 +1,93 @@
+import Button from "./UI/Button";
+import CrossIcon from "@/icons/icon-cross.svg";
+import Select from "./UI/Select";
+import TextInput from "./UI/TextInput";
+const CreateTask = () => {
+  return (
+    <div className="modal-content">
+      <h2 className="text-black4 mb-6">Add New Task</h2>
+      <div className="space-y-6">
+        <TextInput
+          label={"Title"}
+          placeholder={"e.g. Take coffee break"}
+          name={"title"}
+        />
+        <div className="">
+          <label
+            htmlFor="description"
+            className="block  text-gray3 text-sm font-bold"
+          >
+            Description
+          </label>
+          <div className="mt-2">
+            <textarea
+              name="description"
+              className="min-h-[120px] resize-none 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"
+              placeholder="e.g. It’s always good to take a break. This 15 minute break will recharge the batteries a little."
+              required
+            />
+          </div>
+        </div>
+        <div className="space-y-6">
+          <label
+            htmlFor="title"
+            className="block  text-gray3 text-sm font-bold"
+          >
+            Subtasks
+          </label>
+          <div className="mt-2 space-y-2">
+            <div className="flex items-center">
+              <input
+                type="text"
+                name="subtask"
+                className=""
+                placeholder="e.g. Make coffee"
+                required
+              />
+              <div className="ml-4">
+                <CrossIcon />
+              </div>
+            </div>
+            <div className="flex items-center">
+              <input
+                type="text"
+                name="subtask"
+                className=""
+                placeholder="e.g. Drink coffee & smile"
+                required
+              />
+              <div className="ml-4">
+                <CrossIcon />
+              </div>
+            </div>
+            <Button
+              type={"small secondary"}
+              classes="w-full"
+              label="+ Add New Subtask"
+              onClick={() => {}}
+            />
+          </div>
+
+          <Select
+            label={"Status"}
+            items={[
+              { label: "Todo", value: "todo" },
+              { label: "Doing", value: "doing" },
+              { label: "Done", value: "done" },
+            ]}
+            onChanged={() => {}}
+          />
+
+          <Button
+            label="Create Task"
+            onClick={() => {}}
+            classes={"w-full"}
+            type={"primary small"}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default CreateTask;

components/Delete.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import Button from "./UI/Button";
+interface DeleteProps {
+  title: string;
+  description: string;
+}
+const Delete: React.FC<DeleteProps> = ({ title, description }) => {
+  return (
+    <div className=" modal-content">
+      <h2 className="text-destructive2 mb-6">{title}</h2>
+      <p className=" text-base text-gray3 mb-6">{description}</p>
+      <div className="flex justify-center gap-x-4">
+        <Button
+          label={"Delete"}
+          type={"small destructive"}
+          classes={"w-full"}
+          onClick={() => {}}
+        />
+        <Button
+          label={"Cancel"}
+          type={"small secondary"}
+          classes={"w-full"}
+          onClick={() => {}}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default Delete;

components/MobileBoards.tsx

@@ -0,0 +1,15 @@
+import BoardsList from "./BoardsList";
+import ToggleTheme from "./ToggleTheme";
+
+const MobileBoards = () => {
+  return (
+    <div className="bg-white rounded-md pt-2 mx-7">
+      <BoardsList />
+      <div className="p-4">
+        <ToggleTheme />
+      </div>
+    </div>
+  );
+};
+
+export default MobileBoards;

components/TaskColumn.tsx

@@ -0,0 +1,65 @@
+const TaskColumn = () => {
+  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>
+      </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>
+      </ul>
+    </div>
+  );
+};
+
+export default TaskColumn;

components/ToggleTheme.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import DarkThemeIcon from "@/icons/icon-dark-theme.svg";
+import LightThemeIcon from "@/icons/icon-light-theme.svg";
+const ToggleTheme = () => {
+  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>
+        <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 />
+    </div>
+  );
+};
+
+export default ToggleTheme;

components/UI/Button.tsx

@@ -0,0 +1,33 @@
+interface ButtonProps {
+  onClick: React.MouseEventHandler<HTMLButtonElement>;
+  classes?: string;
+  label: string;
+  type: string;
+}
+const Button: React.FC<ButtonProps> = ({ label, type, classes, onClick }) => {
+  return (
+    <button
+      className={`text-lg   rounded-full  px-6 font-bold cursor-pointer  transition-colors ${classes} ${
+        type?.includes("primary")
+          ? "text-white bg-primary2 hover:bg-primary1"
+          : ""
+      } ${
+        type?.includes("secondary")
+          ? "bg-secondary1 hover:bg-secondary2 text-primary2"
+          : ""
+      } ${
+        type?.includes("destructive")
+          ? " text-white bg-destructive2 hover:bg-destructive1"
+          : ""
+      }
+      ${type.includes("small") ? "text-base py-2" : ""} ${
+        type.includes("large") ? "py-4" : ""
+      }`}
+      onClick={onClick}
+    >
+      {label}
+    </button>
+  );
+};
+
+export default Button;

components/UI/Checkbox.tsx

@@ -0,0 +1,29 @@
+import React, { useState } from "react";
+interface CheckBoxProps {
+  checked: boolean;
+  label: string;
+}
+const Checkbox: React.FC<CheckBoxProps> = ({ label, checked }) => {
+  const defaultChecked = checked ? checked : false;
+  const [isChecked, setIsChecked] = useState(defaultChecked);
+
+  return (
+    <label className="flex p-3 bg-white2 hover:bg-secondary2 rounded select-none cursor-pointer items-center">
+      <input
+        type="checkbox"
+        className="cursor-pointer appearance-none w-4 h-4 bg-white border rounded-sm border-gray1 mr-4 checked:bg-primary2 checked:bg-no-repeat checked:bg-center  checked:bg-[url(/assets/images/icon-check.svg)]"
+        checked={isChecked}
+        onChange={() => setIsChecked((prev) => !prev)}
+      />
+      <span
+        className={`text-sm font-bold ${
+          isChecked ? "text-[#00010c80] line-through" : ""
+        }`}
+      >
+        {label}
+      </span>
+    </label>
+  );
+};
+
+export default Checkbox;