initial commit

1 files changed, 38 insertions, 0 deletions

diff --git a/src/web/components/input/Input.jsx b/src/web/components/input/Input.jsx
new file mode 100644
index 0000000..2c7bc6e
--- /dev/null
+++ b/src/web/components/input/Input.jsx
@@ -0,0 +1,38 @@
+import React from "react";
+
+import styles from "./Input.css";
+import animations from "styles/animations.css";
+
+function InputField({className, type, id, value, onChange, inputType}) {
+    // idk how to do this less uglily
+    switch (inputType) {
+        case "textarea":
+            return <textarea className={className} type={type} id={id} value={value} onChange={onChange} />;
+        default:
+            break;
+    }
+    return <input className={className} type={type} id={id} value={value} onChange={onChange} />;
+}
+
+export default function Input({className, type, field, title, setField, validateField, inputType}) {
+    return (
+        <div className={styles.container + (className ? " " + className : "")}>
+            <div className={styles.row}>
+                <label htmlFor={title} className={styles.label}>{title}</label>
+                <h3 className={(field?.animating ? animations.shake : "")}
+                    onAnimationEnd={() => {setField({...field, animating: false});}}>
+                    {field?.erroring ? validateField(field) : null}
+                </h3>
+            </div>
+            <InputField className={styles.input}
+                inputType={inputType}
+                type={type} 
+                id={title}
+                value={field?.target?.value ?? ""}
+                onChange={(event) => {setField({...field, 
+                                                erroring: true,
+                                                target: event.target});}}
+                field={field} />
+        </div>
+    );
+}
\ No newline at end of file