2 files changed, 69 insertions, 0 deletions
diff --git a/src/web/components/input/Input.css b/src/web/components/input/Input.css
new file mode 100644
index 0000000..a7da62d
--- /dev/null
+++ b/src/web/components/input/Input.css
@@ -0,0 +1,31 @@
+.container {
+    display: flex;
+    flex-direction: column;
+}
+
+.row {
+    width: 100%;
+
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-end;
+}
+
+.input {
+    padding: 0.2rem 1rem;
+    margin: 0.5rem 0 1rem;
+
+    background-color: transparent;
+    border-radius: 2em;
+    border: 2px solid var(--brand-80);
+    color: var(--black-98);
+    font-size: inherit;
+    font-family: inherit;
+    letter-spacing: inherit;
+    resize: none;
+}
+
+.label {
+    font-size: 1.35em;
+    font-style: italic;
+}
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