| 16 | }; |
| 17 | |
| 18 | export function ModePicker({ mode, onChange }: Props) { |
| 19 | const t = useT(); |
| 20 | return ( |
| 21 | <div className="flex flex-col gap-1"> |
| 22 | <span className="k-eyebrow">{t("picker.mode")}</span> |
| 23 | <select |
| 24 | value={mode} |
| 25 | onChange={(e) => onChange(e.target.value as QueryMode)} |
| 26 | className="k-select min-w-[120px]" |
| 27 | title={t(MODE_DESC_KEY[mode])} |
| 28 | > |
| 29 | {QUERY_MODES.map((m) => ( |
| 30 | <option |
| 31 | key={m.id} |
| 32 | value={m.id} |
| 33 | title={t(MODE_DESC_KEY[m.id])} |
| 34 | style={{ background: "var(--ink-2)", color: "var(--paper)" }} |
| 35 | > |
| 36 | {m.name} |
| 37 | </option> |
| 38 | ))} |
| 39 | </select> |
| 40 | </div> |
| 41 | ); |
| 42 | } |