tasks

web/components/routes/task/TaskForm.tsx

@@ -0,0 +1,43 @@
+"use client"
+
+import React, { useState } from "react"
+import { Task } from "@/lib/schema/tasks"
+import { Input } from "@/components/ui/input"
+import { useAccount } from "@/lib/providers/jazz-provider"
+import { LaIcon } from "@/components/custom/la-icon"
+
+interface TaskFormProps {
+	onAddTask: (task: Task) => void
+}
+
+export const TaskForm: React.FC<TaskFormProps> = ({ onAddTask }) => {
+	const [title, setTitle] = useState("")
+	const { me } = useAccount()
+
+	const handleSubmit = (e: React.FormEvent) => {
+		e.preventDefault()
+		if (title.trim() && me) {
+			const newTask = Task.create(
+				{
+					title,
+					description: "",
+					status: "todo",
+					createdAt: new Date(),
+					updatedAt: new Date()
+				},
+				{ owner: me._owner }
+			)
+			onAddTask(newTask)
+			setTitle("")
+		}
+	}
+
+	return (
+		<form onSubmit={handleSubmit} className="flex space-x-2">
+			<Input value={title} className="w-[50%]" onChange={e => setTitle(e.target.value)} placeholder="Add new task" />
+			<button className="bg-inherit" type="submit">
+				<LaIcon name="CirclePlus" className="size-6" />
+			</button>
+		</form>
+	)
+}

web/components/routes/task/TaskItem.tsx

@@ -0,0 +1,21 @@
+import React from "react"
+import { Task } from "@/lib/schema/tasks"
+import { Checkbox } from "@/components/ui/checkbox"
+
+interface TaskItemProps {
+	task: Task
+	onUpdateTask: (taskId: string, updates: Partial<Task>) => void
+}
+
+export const TaskItem: React.FC<TaskItemProps> = ({ task, onUpdateTask }) => {
+	const statusChange = (checked: boolean) => {
+		onUpdateTask(task.id, { status: checked ? "done" : "todo" })
+	}
+
+	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>
+	)
+}

web/components/routes/task/TaskList.tsx

@@ -0,0 +1,18 @@
+import React from "react"
+import { Task } from "@/lib/schema/tasks"
+import { TaskItem } from "./TaskItem"
+
+interface TaskListProps {
+	tasks: Task[]
+	onUpdateTask: (taskId: string, updates: Partial<Task>) => void
+}
+
+export const TaskList: React.FC<TaskListProps> = ({ tasks, onUpdateTask }) => {
+	return (
+		<ul className="space-y-2">
+			{tasks.map(task => (
+				<TaskItem key={task.id} task={task} onUpdateTask={onUpdateTask} />
+			))}
+		</ul>
+	)
+}

web/components/routes/task/TaskRoute.tsx

@@ -0,0 +1,34 @@
+"use client"
+
+import { useAccount } from "@/lib/providers/jazz-provider"
+import { Task } from "@/lib/schema/tasks"
+import { TaskList } from "./TaskList"
+import { TaskForm } from "./TaskForm"
+
+export const TaskRoute: React.FC = () => {
+	const { me } = useAccount({ root: { tasks: [] } })
+	const tasks = me?.root?.tasks || []
+
+	const addTask = (newTask: Task) => {
+		if (me?.root?.tasks) {
+			me.root.tasks.push(newTask)
+		}
+	}
+
+	const updateTask = (taskId: string, updates: Partial<Task>) => {
+		if (me?.root?.tasks) {
+			const taskIndex = me.root.tasks.findIndex(task => task?.id === taskId)
+			if (taskIndex !== -1) {
+				Object.assign(me.root.tasks[taskIndex]!, updates)
+			}
+		}
+	}
+
+	return (
+		<div className="flex flex-col space-y-4 p-4">
+			<h1 className="text-2xl font-bold">Tasks</h1>
+			<TaskForm onAddTask={addTask} />
+			<TaskList tasks={tasks as Task[]} updateTask={updateTask} />
+		</div>
+	)
+}