{
  "name": "editable-todo-list-demo",
  "type": "registry:example",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "editable",
    "checkbox"
  ],
  "files": [
    {
      "path": "examples/editable-todo-list-demo.tsx",
      "type": "registry:example",
      "content": "\"use client\";\n\nimport { Edit, Trash2 } from \"lucide-react\";\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { Button } from \"@/registry/bases/base/ui/button\";\nimport { Checkbox } from \"@/registry/bases/base/ui/checkbox\";\nimport {\n  Editable,\n  EditableArea,\n  EditableInput,\n  EditablePreview,\n  EditableTrigger,\n} from \"@/registry/bases/base/ui/editable\";\n\ninterface Todo {\n  id: string;\n  text: string;\n  completed: boolean;\n}\n\nexport default function EditableTodoListDemo() {\n  const [todos, setTodos] = React.useState<Todo[]>([\n    { id: \"1\", text: \"Ollie\", completed: false },\n    { id: \"2\", text: \"Kickflip\", completed: false },\n    { id: \"3\", text: \"360 flip\", completed: false },\n    { id: \"4\", text: \"540 flip\", completed: false },\n  ]);\n\n  const onDeleteTodo = React.useCallback((id: string) => {\n    setTodos((prev) => prev.filter((todo) => todo.id !== id));\n  }, []);\n\n  const onToggleTodo = React.useCallback((id: string) => {\n    setTodos((prev) =>\n      prev.map((todo) =>\n        todo.id === id ? { ...todo, completed: !todo.completed } : todo,\n      ),\n    );\n  }, []);\n\n  const onUpdateTodo = React.useCallback((id: string, newText: string) => {\n    setTodos((prev) =>\n      prev.map((todo) => (todo.id === id ? { ...todo, text: newText } : todo)),\n    );\n  }, []);\n\n  return (\n    <div className=\"flex w-full min-w-0 flex-col gap-2\">\n      <span className=\"font-semibold text-lg\">Tricks to learn</span>\n      {todos.map((todo) => (\n        <div\n          key={todo.id}\n          className=\"flex items-center gap-2 rounded-lg border bg-card px-4 py-2\"\n        >\n          <Checkbox\n            checked={todo.completed}\n            onCheckedChange={() => onToggleTodo(todo.id)}\n          />\n          <Editable\n            key={todo.id}\n            defaultValue={todo.text}\n            onSubmit={(value) => onUpdateTodo(todo.id, value)}\n            className=\"flex flex-1 flex-row items-center gap-1.5\"\n          >\n            <EditableArea className=\"flex-1\">\n              <EditablePreview\n                className={cn(\"w-full rounded-md px-1.5 py-1\", {\n                  \"text-muted-foreground line-through\": todo.completed,\n                })}\n              />\n              <EditableInput className=\"px-1.5 py-1\" />\n            </EditableArea>\n            <EditableTrigger\n              render={<Button variant=\"ghost\" size=\"icon\" className=\"size-7\" />}\n            >\n              <Edit />\n            </EditableTrigger>\n          </Editable>\n          <Button\n            variant=\"ghost\"\n            size=\"icon\"\n            className=\"size-7 text-destructive\"\n            onClick={() => onDeleteTodo(todo.id)}\n          >\n            <Trash2 />\n          </Button>\n        </div>\n      ))}\n    </div>\n  );\n}\n",
      "target": ""
    }
  ]
}