From 7a878bd0d77fbe8fc2e3e3a341c9c7e3e4e8f6d2 Mon Sep 17 00:00:00 2001
From: lonkaars <l.leblansch@gmail.com>
Date: Sun, 20 Jun 2021 11:33:18 +0200
Subject: added KeybindSelector component beginnings

---
 components/keybindselector.tsx | 32 ++++++++++++++++++++++++++++++++
 1 file changed, 32 insertions(+)
 create mode 100644 components/keybindselector.tsx

(limited to 'components')

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>;
+}
-- 
cgit v1.2.3