\n {/* Completion Filter */}\n

\n Show:\n

\n onCompletedFilter(false)}\n className={`px-2 py-1 text-xs rounded ${\n !showCompleted \n ? 'bg-blue-100 text-blue-700' \n : 'bg-white text-gray-600 hover:bg-gray-100'\n }`}\n >\n Active\n \n onCompletedFilter(true)}\n className={`px-2 py-1 text-xs rounded ${\n showCompleted \n ? 'bg-green-100 text-green-700' \n : 'bg-white text-gray-600 hover:bg-gray-100'\n }`}\n >\n Completed\n \n

\n\n {/* Importance Filter */}\n

\n Priority:\n

\n onImportanceFilter('all')}\n className={`px-2 py-1 text-xs rounded ${\n selectedImportance === 'all' \n ? 'bg-gray-200 text-gray-800' \n : 'bg-white text-gray-600 hover:bg-gray-100'\n }`}\n >\n All\n \n {Object.entries(IMPORTANCE_LABELS).map(([key, config]) => (\n onImportanceFilter(key as ImportanceLevel)}\n className={`px-2 py-1 text-xs rounded flex items-center gap-1 ${\n selectedImportance === key \n ? config.color \n : 'bg-white text-gray-600 hover:bg-gray-100'\n }`}\n >\n {config.emoji}\n {config.label}\n \n ))}\n

\n\n {/* Time Frame Filter */}\n

\n Due:\n

\n onTimeFrameFilter('all')}\n className={`px-2 py-1 text-xs rounded ${\n selectedTimeFrame === 'all' \n ? 'bg-gray-200 text-gray-800' \n : 'bg-white text-gray-600 hover:bg-gray-100'\n }`}\n >\n All\n \n {Object.entries(TIME_FRAME_LABELS).map(([key, config]) => (\n onTimeFrameFilter(key as TimeFrame)}\n className={`px-2 py-1 text-xs rounded flex items-center gap-1 ${\n selectedTimeFrame === key \n ? config.color \n : 'bg-white text-gray-600 hover:bg-gray-100'\n }`}\n >\n {config.emoji}\n {config.label}\n \n ))}\n

\n );\n}","deleted","label",[178,179,161],"frontend","components","permalink","https://www.val.town/x/zoebee/Jotter/code/frontend/components/FilterBar.tsx","extension","actionData","errors"]