diff --git a/src/app/components/LevelSelector.tsx b/src/app/components/LevelSelector.tsx
index c6b5808..dbfb42a 100644
--- a/src/app/components/LevelSelector.tsx
+++ b/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;
diff --git a/src/app/components/PriorityComplexityDisplay.tsx b/src/app/components/PriorityComplexityDisplay.tsx
new file mode 100644
index 0000000..7e22e56
--- /dev/null
+++ b/src/app/components/PriorityComplexityDisplay.tsx
@@ -0,0 +1,39 @@
+import { PriorityIcon } from "../icons/PriorityIcon";
+import { ComplexityIcon } from "../icons/ComplexityIcon";
+import { levelsCount } from "./LevelSelector";
+
+type PriorityComplexityDisplayProps = {
+ priority?: number;
+ complexity?: number;
+};
+
+const priorityComplexityDesc = (desc: number) => {
+ if (desc < 4) return "Low";
+ if (desc < 7) return "Medium";
+ return "High";
+};
+
+export default function PriorityComplexityDisplay({
+ priority,
+ complexity,
+}: PriorityComplexityDisplayProps) {
+ return (
+
+ {priority ?
:
}
+
+
+ {priority ? "Priority:" : "Complexity:"}{" "}
+
+
+
+ {priority && priorityComplexityDesc(priority)}
+ {complexity && priorityComplexityDesc(complexity)}
+
+
+ ({priority || complexity}/{levelsCount})
+
+
+
+
+ );
+}
diff --git a/src/app/components/TaskCard.tsx b/src/app/components/TaskCard.tsx
new file mode 100644
index 0000000..4f7f6af
--- /dev/null
+++ b/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 (
+
+
+
+
+ {task.value}
+
+
+
+ Due Date:
+
+ {task.dueDate ? task.dueDate : "No date"},{" "}
+ {task.dueTime ? task.dueTime : "No time"}
+
+
+
+
+ {task.tags.length > 0 && (
+
+ {task.tags.map((tag) => (
+
+ {tag.value}
+
+ ))}
+
+ )}
+
+
+ );
+}
diff --git a/src/app/components/TaskForm.tsx b/src/app/components/TaskForm.tsx
index ed1b24a..2112bc0 100644
--- a/src/app/components/TaskForm.tsx
+++ b/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,
diff --git a/src/app/icons/CalendarIcon.tsx b/src/app/icons/CalendarIcon.tsx
new file mode 100644
index 0000000..5ca71af
--- /dev/null
+++ b/src/app/icons/CalendarIcon.tsx
@@ -0,0 +1,18 @@
+export const CalendarIcon = () => {
+ return (
+
+ );
+};
diff --git a/src/app/icons/ComplexityIcon.tsx b/src/app/icons/ComplexityIcon.tsx
new file mode 100644
index 0000000..6dbd309
--- /dev/null
+++ b/src/app/icons/ComplexityIcon.tsx
@@ -0,0 +1,61 @@
+export const ComplexityIcon = () => {
+ return (
+
+ );
+};
diff --git a/src/app/icons/PriorityIcon.tsx b/src/app/icons/PriorityIcon.tsx
new file mode 100644
index 0000000..9f33908
--- /dev/null
+++ b/src/app/icons/PriorityIcon.tsx
@@ -0,0 +1,26 @@
+export const PriorityIcon = () => {
+ return (
+
+ );
+};
diff --git a/src/app/icons/SearchIcon.tsx b/src/app/icons/SearchIcon.tsx
new file mode 100644
index 0000000..6e8fd65
--- /dev/null
+++ b/src/app/icons/SearchIcon.tsx
@@ -0,0 +1,17 @@
+export const SearchIcon = ({ className }: { className: string }) => {
+ return (
+
+ );
+};
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 2dc39db..e925371 100644
--- a/src/app/page.tsx
+++ b/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 (
-
- {tasks.map((task) => (
-
-
{task.value}
-
{task.priority}
-
{task.complexity}
-
{task.dueDate}
-
{task.dueTime}
- {task.subtasks.map((subtask) => (
-
-
{subtask.value}
- Completed: {subtask.isCompleted}
-
- ))}
- {task.tags.map((tag) => (
-
{tag.value}
+
+
+
+
+
+
+
+ {tasks.map((task) => (
+
))}
- ))}
-
+
+
+
+
+
);
}
diff --git a/src/redux/features/taskSlice.ts b/src/redux/features/taskSlice.ts
index 055b60c..fc510ca 100644
--- a/src/redux/features/taskSlice.ts
+++ b/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;