Filters.tsx (2197B)
1 import { useState } from "react"; 2 import type { AxisName } from "../lib/types"; 3 4 interface FiltersProps { 5 axisValues: Record<AxisName, string[]>; 6 tasks: string[]; 7 onFilterChange: (filters: Record<string, string>) => void; 8 } 9 10 const AXIS_LABELS: Record<AxisName, string> = { 11 model: "Model", 12 effort: "Effort", 13 prompt_style: "Prompt", 14 language: "Language", 15 human_language: "Human Lang", 16 tool_read: "Tool: Read", 17 tool_write: "Tool: Write", 18 tool_edit: "Tool: Edit", 19 tool_glob: "Tool: Glob", 20 tool_grep: "Tool: Grep", 21 linter: "Linter", 22 playwright: "Playwright", 23 context_file: "Context", 24 web_search: "Web Search", 25 max_budget: "Budget", 26 tests_provided: "Tests Provided", 27 strategy: "Strategy", 28 design_guidance: "Design Guidance", 29 architecture: "Architecture", 30 error_checking: "Error Checking", 31 context_noise: "Context Noise", 32 renderer: "Renderer", 33 provider: "Provider", 34 }; 35 36 export default function Filters({ 37 axisValues, 38 tasks, 39 onFilterChange, 40 }: FiltersProps) { 41 const [filters, setFilters] = useState<Record<string, string>>({}); 42 43 const handleChange = (key: string, value: string) => { 44 const newFilters = { ...filters }; 45 if (value === "") { 46 delete newFilters[key]; 47 } else { 48 newFilters[key] = value; 49 } 50 setFilters(newFilters); 51 onFilterChange(newFilters); 52 }; 53 54 return ( 55 <div className="filters"> 56 <div className="filter-group"> 57 <label>Task</label> 58 <select onChange={(e) => handleChange("task", e.target.value)}> 59 <option value="">All</option> 60 {tasks.map((t) => ( 61 <option key={t} value={t}> 62 {t} 63 </option> 64 ))} 65 </select> 66 </div> 67 {(Object.keys(axisValues) as AxisName[]).map((axis) => ( 68 <div key={axis} className="filter-group"> 69 <label>{AXIS_LABELS[axis]}</label> 70 <select onChange={(e) => handleChange(axis, e.target.value)}> 71 <option value="">All</option> 72 {axisValues[axis].map((v) => ( 73 <option key={v} value={v}> 74 {v} 75 </option> 76 ))} 77 </select> 78 </div> 79 ))} 80 </div> 81 ); 82 }