Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #3 from bonz88/feat/displaying-tasks
feat/displaying-tasks
- Loading branch information
Showing
10 changed files
with
231 additions
and
19 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 ( | ||
<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> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> | ||
); | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> | ||
); | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> | ||
); | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> | ||
); | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters