{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "todo-app1",
  "title": "Todo app",
  "description": "Single column todo list with an add task input, checkbox rows that strike through completed items, a delete button on each row, a remaining task counter and a short motivational quote.",
  "dependencies": [
    "lucide-react@0"
  ],
  "registryDependencies": [
    "button",
    "checkbox",
    "input",
    "label"
  ],
  "files": [
    {
      "path": "contents/blocks/application-ui/todo-app/1/index.tsx",
      "content": "\"use client\";\n\nimport { useState } from \"react\";\nimport { PlusIcon, XIcon } from \"lucide-react\";\n\nimport { cn } from \"@/lib/utils\";\nimport { Button } from \"@/components/ui/button\";\nimport { Checkbox } from \"@/components/ui/checkbox\";\nimport { Input } from \"@/components/ui/input\";\nimport { Label } from \"@/components/ui/label\";\n\ntype Todo = {\n  id: number;\n  title: string;\n  done: boolean;\n};\n\nconst initialTodos: Todo[] = [\n  { id: 1, title: \"Reply to the onboarding feedback email\", done: true },\n  { id: 2, title: \"Draft the Q3 roadmap summary\", done: false },\n  { id: 3, title: \"Book a room for Thursday's retro\", done: true },\n  { id: 4, title: \"Review the pricing page copy\", done: false },\n  { id: 5, title: \"Pick up groceries on the way home\", done: false },\n];\n\nexport default function TodoApp1() {\n  const [todos, setTodos] = useState(initialTodos);\n  const [draft, setDraft] = useState(\"\");\n\n  const remaining = todos.filter((todo) => !todo.done).length;\n\n  function addTodo() {\n    const title = draft.trim();\n    if (!title) return;\n    setTodos((prev) => [...prev, { id: Date.now(), title, done: false }]);\n    setDraft(\"\");\n  }\n\n  function toggleTodo(id: number, done: boolean) {\n    setTodos((prev) =>\n      prev.map((todo) => (todo.id === id ? { ...todo, done } : todo)),\n    );\n  }\n\n  function removeTodo(id: number) {\n    setTodos((prev) => prev.filter((todo) => todo.id !== id));\n  }\n\n  return (\n    <section className=\"py-16 md:py-24\">\n      <div className=\"mx-auto flex max-w-md flex-col gap-6 px-4\">\n        <h2 className=\"text-lg font-semibold\">Your todos</h2>\n\n        <form\n          className=\"flex items-center gap-2\"\n          onSubmit={(event) => {\n            event.preventDefault();\n            addTodo();\n          }}\n        >\n          <Input\n            value={draft}\n            onChange={(event) => setDraft(event.target.value)}\n            placeholder=\"Add a new task\"\n            aria-label=\"New task\"\n          />\n          <Button type=\"submit\" size=\"icon\" disabled={!draft.trim()}>\n            <PlusIcon />\n            <span className=\"sr-only\">Add task</span>\n          </Button>\n        </form>\n\n        <ul className=\"flex flex-col gap-2\">\n          {todos.map((todo) => (\n            <li\n              key={todo.id}\n              className=\"flex items-center gap-3 rounded-xl border py-2 pr-2 pl-4\"\n            >\n              <Checkbox\n                id={`todo-${todo.id}`}\n                checked={todo.done}\n                onCheckedChange={(checked) =>\n                  toggleTodo(todo.id, checked === true)\n                }\n              />\n              <Label\n                htmlFor={`todo-${todo.id}`}\n                className={cn(\n                  \"flex-1 cursor-pointer leading-snug font-normal\",\n                  todo.done && \"text-muted-foreground line-through\",\n                )}\n              >\n                {todo.title}\n              </Label>\n              <Button\n                variant=\"ghost\"\n                size=\"icon-sm\"\n                className=\"text-muted-foreground\"\n                onClick={() => removeTodo(todo.id)}\n              >\n                <XIcon />\n                <span className=\"sr-only\">Delete task</span>\n              </Button>\n            </li>\n          ))}\n        </ul>\n\n        <div className=\"flex flex-col gap-2\">\n          <p className=\"text-sm font-medium\">\n            {remaining === 0\n              ? \"All done for today\"\n              : `${remaining} ${remaining === 1 ? \"task\" : \"tasks\"} remaining`}\n          </p>\n          <p className=\"text-muted-foreground text-sm italic\">\n            &ldquo;Small steps every day add up to big results.&rdquo;\n          </p>\n        </div>\n      </div>\n    </section>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/todo-app1.tsx"
    }
  ],
  "type": "registry:block"
}