Input field component

frontend/src/Components/InputField.tsx

@@ -0,0 +1,41 @@
+/**
+ * A customizable input field
+ * @param props - Settings for the field
+ * @returns {JSX.Element} The input field
+ * @example
+ * <InputField
+ *   type="text"
+ *   label="Example"
+ *   onChange={(e) => {
+ *     setExample(e.target.value);
+ *   }}
+ *   value={example}
+ * />
+ */
+function InputField(props: {
+  label: string;
+  type: string;
+  value: string;
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+}): JSX.Element {
+  return (
+    <div className="mb-4">
+      <label
+        className="block text-gray-700 text-sm font-sans font-bold mb-2"
+        htmlFor={props.label}
+      >
+        {props.label}
+      </label>
+      <input
+        className="appearance-none border-2 border-black rounded-2xl w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
+        id={props.label}
+        type={props.type}
+        placeholder={props.label}
+        value={props.value}
+        onChange={props.onChange}
+      />
+    </div>
+  );
+}
+
+export default InputField;