\n {/* Filter input */}\n

\n \n

\n setFilter(e.target.value)}\n placeholder=\"Filter tables...\"\n className=\"w-full pl-9 pr-3 py-1.5 text-sm rounded-lg border border-sand-300 dark:border-slate-600 bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-100 placeholder-slate-500 dark:placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-warm-500 dark:focus:ring-warm-600 focus:border-transparent\"\n />\n

\n {filter && (\n

\n {filteredTables.length} of {tables.length} table\n {tables.length !== 1 ? \"s\" : \"\"}\n

\n )}\n

\n\n {/* Tables list */}\n

\n {filteredTables.map((item) => {\n const isSelected = selectedTable === item.name;\n\n return (\n handleClick(item.name)}\n className={`\n w-full flex items-center gap-2 px-3 py-1 rounded-lg text-left\n font-medium text-sm transition-all duration-200\n ${\n isSelected\n ? \"bg-warm-100 dark:bg-warm-900/30 text-warm-800 dark:text-warm-300 shadow-sm\"\n : \"text-slate-700 dark:text-slate-300 hover:bg-sand-200 dark:hover:bg-slate-700\"\n }\n `}\n >\n \n {item.type === \"table\" ? : }\n \n {item.name}\n \n );\n })}\n

\n );\n}\n","deleted","label",[181,182,164],"frontend","components","permalink","https://www.val.town/x/hobbs/sqliteExplorerReact/code/frontend/components/TablesList.tsx","extension","actionData","errors"]