term dropdown populating

nextjs/src/components/form/SelectInput.tsx

@@ -0,0 +1,33 @@
+export default function SelectInput<T>({
+  value,
+  setValue,
+  label,
+  options,
+  getOptionName,
+}: {
+  value: T | undefined;
+  setValue: (newValue: T | undefined) => void;
+  label: string;
+  options: T[];
+  getOptionName: (item: T) => string;
+}) {
+  return (
+    <label className="block">
+      {label}
+      <br />
+      <select
+        className="bg-slate-800 rounded-md  px-1"
+        value={value ? getOptionName(value) : ""}
+        onChange={(e) => {
+          const optionName = e.target.value;
+          const option = options.find((o) => getOptionName(o) === optionName);
+          setValue(option);
+        }}
+      >
+        {options.map((o) => (
+          <option key={getOptionName(o)}>{getOptionName(o)}</option>
+        ))}
+      </select>
+    </label>
+  );
+}

nextjs/src/components/form/TextInput.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+
+export default function TextInput({
+  value,
+  setValue,
+  label,
+}: {
+  value: string;
+  setValue: (newValue: string) => void;
+  label: string;
+}) {
+  return (
+    <label className="block">
+      {label}
+      <br />
+      <input
+        className="bg-slate-800 rounded-md  px-1"
+        value={value}
+        onChange={(e) => setValue(e.target.value)}
+      />
+    </label>
+  );
+}