"./src/routes/demo.legend-state.tsx.ejs": "import { <% if (fileRouter) { %>createFileRoute<% } else { %>createRoute<% } %> } from '@tanstack/react-router';\n\nimport { todos$ } from \"@/lib/demo-legend-state\";\nimport { For, useObservable } from \"@legendapp/state/react\";\nimport { $React } from \"@legendapp/state/react-web\";\n\n<% if (codeRouter) { %>\nimport type { RootRoute } from '@tanstack/react-router'\n<% } else { %>\nexport const Route = createFileRoute('/demo/legend-state')({\n component: LegendStateDemo,\n})\n<% } %>;\n\nfunction TodoForm() {\n const todoText$ = useObservable(\"\");\n const handleSubmit = (e: React.FormEvent) => {\n e.preventDefault();\n if (todoText$.peek().trim() === \"\") return;\n todos$.push({\n id: Date.now(),\n text: todoText$.peek().trim(),\n completed: false,\n });\n todoText$.set(\"\");\n };\n return (\n <form onSubmit={handleSubmit}>\n <$React.input\n placeholder=\"Add a todo\"\n type=\"text\"\n $value={todoText$}\n className=\"bg-white/10 rounded-lg px-4 py-2 outline-none border border-white/20 hover:border-white/40 focus:border-white/60 transition-colors duration-200 placeholder-white/40 w-full\"\n />\n </form>\n );\n}\nfunction TodoList() {\n return (\n <ul className=\"space-y-4\">\n <For each={todos$} optimized>\n {(todo) => (\n <li\n key={todo.id.get()}\n className=\"inline-flex items-center gap-2 justify-between w-full\"\n >\n <span className={todo.completed.get() ? \"line-through\" : \"\"}>\n {todo.text.get()}\n </span>\n <span className=\"flex items-center gap-2 justify-center\">\n <$React.input\n type=\"checkbox\"\n $checked={todo.completed}\n className=\"w-6 h-6 text-blue-600 bg-gray-100 border-gray-300 rounded-sm focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600\"\n />\n <button\n type=\"button\"\n onClick={() =>\n todos$.splice(\n todos$.findIndex((t) => t.id.get() === todo.id.get()),\n 1\n )\n }\n className=\"focus:outline-none text-white bg-red-700 hover:bg-red-800 focus:ring-4 focus:ring-red-300 font-medium rounded-lg text-xs px-5 py-2.5 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-900\"\n >\n Remove\n </button>\n </span>\n </li>\n )}\n </For>\n </ul>\n );\n}\n\nfunction LegendStateDemo() {\n return (\n <div\n className=\"min-h-[calc(100vh-32px)] text-white p-8 flex items-center justify-center w-full h-full\"\n style={{\n backgroundImage:\n \"radial-gradient(50% 50% at 80% 80%, #f4a460 0%, #8b4513 70%, #1a0f0a 100%)\",\n }}\n >\n <div className=\"bg-white/10 backdrop-blur-lg rounded-xl p-8 shadow-lg flex flex-col gap-4 text-3xl w-5xl\">\n <h1 className=\"text-4xl font-bold mb-5\">Legend State Example</h1>\n <TodoForm />\n <TodoList />\n </div>\n </div>\n );\n}\n\n<% if (codeRouter) { %>\nexport default (parentRoute: RootRoute) => createRoute({\n path: '/demo/legend-state',\n \n component: LegendStateDemo,\n\n getParentRoute: () => parentRoute,\n})\n<% } %>\n"
0 commit comments