editable-todo-list-demo

1"use client";
2 
3import { Edit, Trash2 } from "lucide-react";
4import * as React from "react";
5import { cn } from "@/lib/utils";
6import { Button } from "@/registry/bases/base/ui/button";
7import { Checkbox } from "@/registry/bases/base/ui/checkbox";
8import {
9  Editable,
10  EditableArea,
11  EditableInput,
12  EditablePreview,
13  EditableTrigger,
14} from "@/registry/bases/base/ui/editable";
15 
16interface Todo {
17  id: string;
18  text: string;
19  completed: boolean;
20}
21 
22export default function EditableTodoListDemo() {
23  const [todos, setTodos] = React.useState<Todo[]>([
24    { id: "1", text: "Ollie", completed: false },
25    { id: "2", text: "Kickflip", completed: false },
26    { id: "3", text: "360 flip", completed: false },
27    { id: "4", text: "540 flip", completed: false },
28  ]);
29 
30  const onDeleteTodo = React.useCallback((id: string) => {
31    setTodos((prev) => prev.filter((todo) => todo.id !== id));
32  }, []);
33 
34  const onToggleTodo = React.useCallback((id: string) => {
35    setTodos((prev) =>
36      prev.map((todo) =>
37        todo.id === id ? { ...todo, completed: !todo.completed } : todo,
38      ),
39    );
40  }, []);
41 
42  const onUpdateTodo = React.useCallback((id: string, newText: string) => {
43    setTodos((prev) =>
44      prev.map((todo) => (todo.id === id ? { ...todo, text: newText } : todo)),
45    );
46  }, []);
47 
48  return (
49    <div className="flex w-full min-w-0 flex-col gap-2">
50      <span className="font-semibold text-lg">Tricks to learn</span>
51      {todos.map((todo) => (
52        <div
53          key={todo.id}
54          className="flex items-center gap-2 rounded-lg border bg-card px-4 py-2"
55        >
56          <Checkbox
57            checked={todo.completed}
58            onCheckedChange={() => onToggleTodo(todo.id)}
59          />
60          <Editable
61            key={todo.id}
62            defaultValue={todo.text}
63            onSubmit={(value) => onUpdateTodo(todo.id, value)}
64            className="flex flex-1 flex-row items-center gap-1.5"
65          >
66            <EditableArea className="flex-1">
67              <EditablePreview
68                className={cn("w-full rounded-md px-1.5 py-1", {
69                  "text-muted-foreground line-through": todo.completed,
70                })}
71              />
72              <EditableInput className="px-1.5 py-1" />
73            </EditableArea>
74            <EditableTrigger
75              render={<Button variant="ghost" size="icon" className="size-7" />}
76            >
77              <Edit />
78            </EditableTrigger>
79          </Editable>
80// … truncated