\n {/* Header */}\n

\n {isEditing ? \"Edit Todo\" : \"New Todo\"}\n

\n \n \n \n

\n\n {/* Form */}\n

\n {/* Title */}\n

\n \n Title *\n \n setTitle(e.target.value)}\n placeholder=\"What needs to be done?\"\n className=\"\n w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600\n bg-white dark:bg-gray-700 text-gray-900 dark:text-white\n placeholder-gray-500 dark:placeholder-gray-400\n focus:ring-2 focus:ring-warm-500 focus:border-transparent\n transition-colors\n \"\n disabled={isLoading}\n autoFocus\n required\n />\n

\n\n {/* Description */}\n

\n \n Description\n \n setDescription(e.target.value)}\n placeholder=\"Add more details (optional)\"\n rows={3}\n className=\"\n w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600\n bg-white dark:bg-gray-700 text-gray-900 dark:text-white\n placeholder-gray-500 dark:placeholder-gray-400\n focus:ring-2 focus:ring-warm-500 focus:border-transparent\n transition-colors resize-none\n \"\n disabled={isLoading}\n />\n

\n\n {/* Priority */}\n

\n \n Priority\n \n

\n {PRIORITY_OPTIONS.map((key) => {\n const p = PRIORITIES[key];\n const isSelected = priority === key;\n const colorClasses = {\n low: isSelected\n ? \"bg-emerald-500 text-white border-emerald-500\"\n : \"border-emerald-300 text-emerald-700 hover:bg-emerald-50 dark:border-emerald-700 dark:text-emerald-400 dark:hover:bg-emerald-900/20\",\n medium: isSelected\n ? \"bg-amber-500 text-white border-amber-500\"\n : \"border-amber-300 text-amber-700 hover:bg-amber-50 dark:border-amber-700 dark:text-amber-400 dark:hover:bg-amber-900/20\",\n high: isSelected\n ? \"bg-rose-500 text-white border-rose-500\"\n : \"border-rose-300 text-rose-700 hover:bg-rose-50 dark:border-rose-700 dark:text-rose-400 dark:hover:bg-rose-900/20\",\n };\n\n return (\n setPriority(key)}\n disabled={isLoading}\n className={`\n flex-1 px-4 py-2 rounded-lg border-2 font-medium\n transition-colors ${colorClasses[key]}\n `}\n >\n {p.label}\n \n );\n })}\n

\n\n {/* Submit button */}\n

\n \n {isLoading ? (\n <>\n \n {isEditing ? \"Saving...\" : \"Creating...\"}\n \n ) : (\n {isEditing ? \"Save Changes\" : \"Create Todo\"}\n )}\n \n

\n );\n}\n\nexport default TodoForm;\n","deleted","label",[174,175,156],"FRONTEND","components","permalink","https://www.val.town/x/cgshaq/untitled-2571/code/FRONTEND/components/TodoForm.tsx","extension","actionData","errors"]