feat: generic modal

src/components/atoms/KeyValuePair.tsx

@@ -0,0 +1,52 @@
+import React, { forwardRef, useImperativeHandle } from "react";
+import { Box, TextField } from "@mui/material";
+
+interface KeyValueFormProps {
+  keyLabel?: string;
+  valueLabel?: string;
+}
+
+export const KeyValuePair = forwardRef(({keyLabel, valueLabel}: KeyValueFormProps, ref) => {
+  const [key, setKey] = React.useState<string>('');
+  const [value, setValue] = React.useState<string|number>('');
+  useImperativeHandle(ref, () => ({
+    getKeyValuePair() {
+      return { key, value };
+    }
+  }));
+  return (
+    <Box
+      component="form"
+      sx={{
+        '& > :not(style)': { m: 1, width: '100px' },
+      }}
+      noValidate
+      autoComplete="off"
+    >
+      <TextField
+        id="outlined-name"
+        label={keyLabel || "Key"}
+        value={key}
+        onChange={(event: React.ChangeEvent<HTMLInputElement>) => setKey(event.target.value)}
+        size="small"
+        required
+      />
+      <TextField
+        id="outlined-name"
+        label={valueLabel || "Value"}
+        value={value}
+        onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+          const num = Number(event.target.value);
+          if (isNaN(num)){
+            setValue(event.target.value);
+          }
+          else {
+            setValue(num);
+          }
+        }}
+        size="small"
+        required
+      />
+    </Box>
+  );
+});