diff --git a/src/components/jam/key-center-selector.tsx b/src/components/jam/key-center-selector.tsx index c926fa9..cc116b5 100644 --- a/src/components/jam/key-center-selector.tsx +++ b/src/components/jam/key-center-selector.tsx @@ -2,8 +2,8 @@ import { Select } from "theme-ui"; import { Note21 } from "../../18th-century-europe/note"; export interface KeyCenterSelectorProps { - keyCenter: Note21; - setKeyCenter: (keyCenter: Note21) => void; + keyCenter: Note21 | null; + setKeyCenter: (keyCenter: Note21 | null) => void; } export const KeyCenterSelector: React.FC = ({ @@ -14,14 +14,18 @@ export const KeyCenterSelector: React.FC = ({ (value) => typeof value === "string" ); + const onChange = (event: React.ChangeEvent) => { + if (event.target.value === "Chromatic") { + setKeyCenter(null); + } else { + setKeyCenter(Note21[event.target.value as keyof typeof Note21]); + } + }; + return ( <> - + {keyCenters.map((key) => (