starred/linsa-linsa-io
1
0
Fork 0
mirror of https://github.com/linsa-io/linsa.git synced 2026-04-26 10:18:34 +02:00
Code Issues 2 Packages Projects Releases Wiki Activity

create new task ui

Browse Source
This commit is contained in:
marshennikovaolga
2024-09-22 12:40:14 +03:00
parent da4f018bbd
commit f362f70ff0
5 changed files with 56 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
web/components/routes/task/TaskItem.tsx
View File

@@ -1,6 +1,6 @@
import React from "react"
import { Task } from "@/lib/schema/tasks"
import { Checkbox } from "@/components/ui/checkbox"
import { format } from "date-fns"
interface TaskItemProps {
task: Task
@@ -12,10 +12,15 @@ export const TaskItem: React.FC<TaskItemProps> = ({ task, onUpdateTask }) => {
onUpdateTask(task.id, { status: checked ? "done" : "todo" })
}
const formattedDate = format(new Date(task.createdAt), "EEE, MMMM do, yyyy")
return (
<li className="flex items-center space-x-2">
<Checkbox checked={task.status === "done"} onCheckedChange={statusChange} />
<span className={task.status === "done" ? "text-foreground line-through" : ""}>{task.title}</span>
<li className="bg-result transitiion-opacity flex items-center justify-between rounded-lg p-2 px-3 hover:opacity-60">
<div className="flex flex-row items-center gap-3">
<Checkbox checked={task.status === "done"} onCheckedChange={statusChange} />
<p className={task.status === "done" ? "text-foreground line-through" : ""}>{task.title}</p>
</div>
<span className="text-muted-foreground text-xs">{formattedDate}</span>
</li>
)
}