[FEATURE] Quality of Life Improvements for Management (#7)

Co-authored-by: Dunemask <dunemask@gmail.com>
Reviewed-on: https://gitea.dunemask.dev/elysium/minecluster/pulls/7

src/components/server-options/ExtraPortsOption.jsx

@@ -0,0 +1,41 @@
+import { useState } from "react";
+import TextField from "@mui/material/TextField";
+import Autocomplete from "@mui/material/Autocomplete";
+import Chip from "@mui/material/Chip";
+
+const validatePort = (p) => p !== "25565" && p !== "25575" && p.length < 6;
+
+export default function ExtraPortsOption(props) {
+  const [extraPorts, setExtraPorts] = useState([]);
+  const { onChange } = props;
+
+  function portChange(e, val, optionType, changedValue) {
+    if (optionType === "clear") {
+      setExtraPorts([]);
+      onChange("extraPorts", []);
+      return;
+    }
+    if (!validatePort(changedValue.option))
+      return alert("That port cannot be added/removed as an extra port!");
+    setExtraPorts(val);
+    onChange("extraPorts", val);
+  }
+
+  return (
+    <Autocomplete
+      multiple
+      id="extra-ports-autocomplete"
+      options={[]}
+      value={extraPorts}
+      onChange={portChange}
+      freeSolo
+      renderInput={(p) => <TextField {...p} label="Extra Ports" />}
+      renderTags={(value, getTagProps) =>
+        value.map((option, index) => {
+          const defaultChipProps = getTagProps({ index });
+          return <Chip label={option} {...defaultChipProps} />;
+        })
+      }
+    />
+  );
+}