feat/displaying-tasks

src/app/components/LevelSelector.tsx

@@ -1,4 +1,5 @@
 const levels = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
+export const levelsCount = levels.length;
 
 type LevelSelectorProps = {
   label: string;

src/app/components/PriorityComplexityDisplay.tsx

@@ -0,0 +1,38 @@
+import { PriorityIcon } from "../icons/PriorityIcon";
+import { ComplexityIcon } from "../icons/ComplexityIcon";
+import { levelsCount } from "./LevelSelector";
+
+type PriorityComplexityDisplayProps = {
+  priority?: number;
+  complexity?: number;
+};
+
+export default function PriorityComplexityDisplay({
+  priority,
+  complexity,
+}: PriorityComplexityDisplayProps) {
+  const priorityComplexityDesc = (desc: number) => {
+    if (desc < 4) return "Low";
+    if (desc < 7) return "Medium";
+    return "High";
+  };
+  return (
+    <div className="flex gap-2">
+      {priority ? <PriorityIcon /> : <ComplexityIcon />}
+      <div className="flex gap-1">
+        <span className="text-sm text-gray-600">
+          {priority ? "Priority:" : "Complexity:"}{" "}
+        </span>
+        <span className="text-sm flex gap-1">
+          <span className="text-sm">
+            {priority && priorityComplexityDesc(priority)}
+            {complexity && priorityComplexityDesc(complexity)}
+          </span>
+          <span className="text-sm">
+            ({priority || complexity}/{levelsCount})
+          </span>
+        </span>
+      </div>
+    </div>
+  );
+}

src/app/components/TaskCard.tsx

@@ -0,0 +1,43 @@
+import PriorityComplexityDisplay from "./PriorityComplexityDisplay";
+import { ITask } from "../types/types";
+import { CalendarIcon } from "../icons/CalendarIcon";
+
+type TaskCardProps = {
+  task: ITask;
+};
+
+export default function TaskCard({ task }: TaskCardProps) {
+  return (
+    <div
+      className={`mt-6 rounded-xl flex justify-between py-4 px-2 ${
+        task.isCompleted ? "bg-[rgba(13, 153, 255, 0.1)]" : "bg-white"
+      }`}
+    >
+      <div className="flex flex-col gap-2">
+        <div className="flex gap-2 items-center">
+          <span className="w-4 h-4 rounded-full bg-black" />
+          <span className="text-base">{task.value}</span>
+        </div>
+        <div className="flex gap-2 items-center">
+          <CalendarIcon />
+          <span className="text-sm text-gray-600">Due Date: </span>
+          <span className="text-sm">
+            {task.dueDate ? task.dueDate : "No date"},{" "}
+            {task.dueTime ? task.dueTime : "No time"}
+          </span>
+        </div>
+        <PriorityComplexityDisplay priority={task.priority} />
+        <PriorityComplexityDisplay complexity={task.complexity} />
+        {task.tags.length > 0 && (
+          <div className="mt-1 flex gap-2">
+            {task.tags.map((tag) => (
+              <span key={tag.id} className="text-xs bg-blue-100 p-1 rounded-lg">
+                {tag.value}
+              </span>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

src/app/components/TaskForm.tsx

@@ -48,6 +48,7 @@ export default function TaskForm({ label }: { label: string }) {
       handleAddTask({
         id: Math.random().toString(),
         value,
+        isCompleted: false,
         priority,
         complexity,
         dueDate,

src/app/icons/CalendarIcon.tsx

@@ -0,0 +1,18 @@
+export const CalendarIcon = () => {
+  return (
+    <svg
+      width="18"
+      height="18"
+      viewBox="0 0 18 18"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M2.25 6.75V13.5C2.25 15.1569 3.59315 16.5 5.25 16.5H12.75C14.4069 16.5 15.75 15.1569 15.75 13.5V6.75M2.25 6.75V5.625C2.25 3.96815 3.59315 2.625 5.25 2.625H12.75C14.4069 2.625 15.75 3.96815 15.75 5.625V6.75M2.25 6.75H15.75M12 1.5V3.75M6 1.5V3.75"
+        stroke="#090003"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+};

src/app/icons/ComplexityIcon.tsx

@@ -0,0 +1,61 @@
+export const ComplexityIcon = () => {
+  return (
+    <svg
+      width="18"
+      height="18"
+      viewBox="0 0 18 18"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g clipPath="url(#clip0_646_2051)">
+        <path
+          d="M3.75 6.75L1.5 9L3.75 11.25"
+          stroke="#25282B"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M6.75 3.75L9 1.5L11.25 3.75"
+          stroke="#25282B"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M11.25 14.25L9 16.5L6.75 14.25"
+          stroke="#25282B"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M14.25 6.75L16.5 9L14.25 11.25"
+          stroke="#25282B"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M1.5 9H16.5"
+          stroke="#25282B"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M9 1.5V16.5"
+          stroke="#25282B"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_646_2051">
+          <rect width="18" height="18" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};

src/app/icons/PriorityIcon.tsx

@@ -0,0 +1,26 @@
+export const PriorityIcon = () => {
+  return (
+    <svg
+      width="18"
+      height="18"
+      viewBox="0 0 18 18"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M9 14.25V3.75"
+        stroke="#25282B"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M3.75 9L9 3.75L14.25 9"
+        stroke="#25282B"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};

src/app/icons/SearchIcon.tsx

@@ -0,0 +1,17 @@
+export const SearchIcon = ({ className }: { className: string }) => {
+  return (
+    <svg
+      className={className}
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M20.71 19.29L17.31 15.9C18.407 14.5025 19.0022 12.7767 19 11C19 9.41775 18.5308 7.87103 17.6518 6.55544C16.7727 5.23985 15.5233 4.21447 14.0615 3.60897C12.5997 3.00347 10.9911 2.84504 9.43928 3.15372C7.88743 3.4624 6.46197 4.22433 5.34315 5.34315C4.22433 6.46197 3.4624 7.88743 3.15372 9.43928C2.84504 10.9911 3.00347 12.5997 3.60897 14.0615C4.21447 15.5233 5.23985 16.7727 6.55544 17.6518C7.87103 18.5308 9.41775 19 11 19C12.7767 19.0022 14.5025 18.407 15.9 17.31L19.29 20.71C19.383 20.8037 19.4936 20.8781 19.6154 20.9289C19.7373 20.9797 19.868 21.0058 20 21.0058C20.132 21.0058 20.2627 20.9797 20.3846 20.9289C20.5064 20.8781 20.617 20.8037 20.71 20.71C20.8037 20.617 20.8781 20.5064 20.9289 20.3846C20.9797 20.2627 21.0058 20.132 21.0058 20C21.0058 19.868 20.9797 19.7373 20.9289 19.6154C20.8781 19.4936 20.8037 19.383 20.71 19.29ZM5 11C5 9.81332 5.3519 8.65328 6.01119 7.66658C6.67047 6.67989 7.60755 5.91085 8.7039 5.45673C9.80026 5.0026 11.0067 4.88378 12.1705 5.11529C13.3344 5.3468 14.4035 5.91825 15.2426 6.75736C16.0818 7.59648 16.6532 8.66558 16.8847 9.82946C17.1162 10.9933 16.9974 12.1997 16.5433 13.2961C16.0892 14.3925 15.3201 15.3295 14.3334 15.9888C13.3467 16.6481 12.1867 17 11 17C9.4087 17 7.88258 16.3679 6.75736 15.2426C5.63214 14.1174 5 12.5913 5 11Z"
+        fill="black"
+      />
+    </svg>
+  );
+};

src/app/page.tsx

@@ -1,30 +1,35 @@
 "use client";
-
+import Link from "next/link";
 import { useAppSelector } from "../redux/store";
+import { SearchIcon } from "./icons/SearchIcon";
+import { PlusIcon } from "./icons/PlusIcon";
+import TaskCard from "./components/TaskCard";
 
 export default function Home() {
   const tasks = useAppSelector((state) => state.task.tasks);
 
   return (
-    <main className="flex min-h-screen flex-col items-center justify-between p-24">
-      {tasks.map((task) => (
-        <div key={task.id}>
-          <h1>{task.value}</h1>
-          <h1>{task.priority}</h1>
-          <h1>{task.complexity}</h1>
-          <h1>{task.dueDate}</h1>
-          <h1>{task.dueTime}</h1>
-          {task.subtasks.map((subtask) => (
-            <div key={subtask.id}>
-              <h1>{subtask.value}</h1>
-              <h1>Completed: {subtask.isCompleted}</h1>
-            </div>
-          ))}
-          {task.tags.map((tag) => (
-            <h1 key={tag.id}>{tag.value}</h1>
+    <div className="mt-4 flex flex-col items-center">
+      <div className="w-[275px] sm:w-[358px]">
+        <div className="relative">
+          <input
+            className="w-full h-14 flex items-center border-0 outline-none rounded-full py-3 pl-12 placeholder-gray-500"
+            placeholder="Search..."
+          />
+          <SearchIcon className="absolute top-4 left-4" />
+        </div>
+        <div className="w-full flex flex-col">
+          {tasks.map((task) => (
+            <TaskCard task={task} key={task.id} />
           ))}
         </div>
-      ))}
-    </main>
+      </div>
+      <Link href="/task/add">
+        <button className="bg-blue-500 rounded-full flex gap-2 mt-6 p-4 border-none focus:outline-none focus:ring-0">
+          <PlusIcon />
+          <span className="text-white">Add New Task</span>
+        </button>
+      </Link>
+    </div>
   );
 }

src/redux/features/taskSlice.ts

@@ -4,6 +4,7 @@ import { ISubtask, ITag } from "../../app/types/types";
 type ITask = {
   id: string;
   value: string;
+  isCompleted: false;
   priority: number;
   complexity: number;
   dueDate: string;