1 files changed, 32 insertions, 0 deletions
diff --git a/components/keybindselector.tsx b/components/keybindselector.tsx
new file mode 100644
index 0000000..084d748
--- /dev/null
+++ b/components/keybindselector.tsx
@@ -0,0 +1,32 @@
+import FilledInput from '@material-ui/core/FilledInput';
+import FormControl from '@material-ui/core/FormControl';
+import InputLabel from '@material-ui/core/InputLabel';
+import { useState } from 'react';
+import { v4 as uuid } from 'uuid';
+
+function Keybind(props: {
+	keyName: string;
+}) {
+	return <span className='keybind'>{props.keyName}</span>;
+}
+
+function KeybindSelectorInner(props: {
+	value: string[];
+}) {
+	return <div className='keybind-selector-inner'>
+		{props.value.map(s => <Keybind keyName={s} />)}
+	</div>;
+}
+
+export default function KeybindSelector(props: {
+	label: string;
+	value: string[];
+	onChange?: (newValue: string[]) => any;
+}) {
+	var [tempID, _setTempID] = useState(uuid());
+
+	return <FormControl variant='filled' className='keybind-selector' tabIndex={0}>
+		<InputLabel htmlFor={tempID} shrink>{props.label}</InputLabel>
+		<FilledInput id={tempID} inputComponent={() => <KeybindSelectorInner value={props.value} />} />
+	</FormControl>;
+}