feat: update task list items to use Link component for navigation

This commit is contained in:
Abhimanyu Saharan
2026-02-11 17:23:44 +05:30
parent a176bec996
commit 162a3bbf40

View File

@@ -999,47 +999,53 @@ export default function BoardGroupDetailPage() {
{item.tasks && item.tasks.length > 0 ? ( {item.tasks && item.tasks.length > 0 ? (
<ul className="space-y-3"> <ul className="space-y-3">
{item.tasks.map((task) => ( {item.tasks.map((task) => (
<li <li key={task.id}>
key={task.id} <Link
className="rounded-lg border border-slate-200 bg-slate-50/40 p-3" href={{
> pathname: `/boards/${item.board.id}`,
<div className="flex flex-wrap items-center justify-between gap-2"> query: { taskId: task.id },
<div className="flex min-w-0 items-center gap-2"> }}
<span className="block rounded-lg border border-slate-200 bg-slate-50/40 p-3 transition hover:border-blue-200 hover:bg-blue-50/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2"
className={cn( title="Open task on board"
"inline-flex flex-shrink-0 items-center rounded-full border px-2 py-0.5 text-[11px] font-semibold", >
statusTone(task.status), <div className="flex flex-wrap items-center justify-between gap-2">
)} <div className="flex min-w-0 items-center gap-2">
> <span
{statusLabel(task.status)} className={cn(
</span> "inline-flex flex-shrink-0 items-center rounded-full border px-2 py-0.5 text-[11px] font-semibold",
<span statusTone(task.status),
className={cn( )}
"inline-flex flex-shrink-0 items-center rounded-full border px-2 py-0.5 text-[11px] font-semibold", >
priorityTone(task.priority), {statusLabel(task.status)}
)} </span>
> <span
{task.priority} className={cn(
</span> "inline-flex flex-shrink-0 items-center rounded-full border px-2 py-0.5 text-[11px] font-semibold",
<p className="truncate text-sm font-medium text-slate-900"> priorityTone(task.priority),
{task.title} )}
>
{task.priority}
</span>
<p className="truncate text-sm font-medium text-slate-900">
{task.title}
</p>
</div>
<p className="text-xs text-slate-500">
{formatTimestamp(task.updated_at)}
</p> </p>
</div> </div>
<p className="text-xs text-slate-500"> <div className="mt-2 flex flex-wrap items-center justify-between gap-2 text-xs text-slate-600">
{formatTimestamp(task.updated_at)} <p className="truncate">
</p> Assignee:{" "}
</div> <span className="font-medium text-slate-900">
<div className="mt-2 flex flex-wrap items-center justify-between gap-2 text-xs text-slate-600"> {task.assignee ?? "Unassigned"}
<p className="truncate"> </span>
Assignee:{" "} </p>
<span className="font-medium text-slate-900"> <p className="font-mono text-[11px] text-slate-400">
{task.assignee ?? "Unassigned"} {task.id}
</span> </p>
</p> </div>
<p className="font-mono text-[11px] text-slate-400"> </Link>
{task.id}
</p>
</div>
</li> </li>
))} ))}
</ul> </ul>