\n );\n }\n\n if (error) {\n return (\n

Error Loading Topics

\n {error instanceof Error ? error.message : \"Unknown error occurred\"}\n

\n );\n }\n\n return (\n

Topic Management

\n setShowCreateForm(true)}\n className=\"bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg transition-colors\"\n >\n Add Topic\n \n

\n\n {/* Create Form Modal */}\n {showCreateForm && (\n

Create New Topic

\n \n {createMutation.error && (\n

\n Error:{\" \"}\n {createMutation.error.message || \"Failed to create topic\"}\n

\n )}\n

\n )}\n\n {/* Edit Form Modal */}\n {editingTopic && (\n

Edit Topic

\n \n {updateMutation.error && (\n

\n Error:{\" \"}\n {updateMutation.error.message || \"Failed to update topic\"}\n

\n )}\n

\n )}\n\n {/* Delete Confirmation Modal */}\n {deleteConfirm && (\n

\n Confirm Delete\n

\n Are you sure you want to delete this topic? This action cannot be\n undone.\n

\n handleDelete(deleteConfirm)}\n disabled={deleteMutation.isLoading}\n className=\"flex-1 bg-red-500 hover:bg-red-600 disabled:bg-red-300 text-white py-2 rounded-md transition-colors\"\n >\n {deleteMutation.isLoading ? \"Deleting...\" : \"Delete\"}\n \n setDeleteConfirm(null)}\n className=\"flex-1 bg-gray-300 hover:bg-gray-400 text-gray-800 py-2 rounded-md transition-colors\"\n >\n Cancel\n \n

\n {deleteMutation.error && (\n

\n Error:{\" \"}\n {deleteMutation.error.message || \"Failed to delete topic\"}\n

\n )}\n

\n )}\n\n {/* Topics List */}\n {topics.length === 0\n ? (\n

No topics created yet

Get started by creating your first topic!

\n )\n : (\n

\n {topics.map((topic) => (\n \n

\n {topic.title}\n

\n #{topic.id}\n

\n\n {topic.description && (\n

\n {topic.description}\n

\n )}\n\n

\n Created: {new Date(topic.created_at).toLocaleDateString()}\n {topic.updated_at !== topic.created_at && (\n <>\n
\n Updated: {new Date(topic.updated_at).toLocaleDateString()}\n \n )}\n

\n\n

\n setEditingTopic(topic)}\n className=\"text-blue-500 hover:text-blue-700 text-sm font-medium transition-colors\"\n >\n Edit\n \n setDeleteConfirm(topic.id)}\n className=\"text-red-500 hover:text-red-700 text-sm font-medium transition-colors\"\n >\n Delete\n \n

\n ))}\n

\n )}\n \n );\n}\n","deleted","label",[169,170,150],"frontend","components","permalink","https://www.val.town/x/jpd3v/offx/code/frontend/components/TopicManagement.tsx","extension","actionData","errors"]