💄 More beautification

src/client/components/ComicVineSearchForm.tsx

@@ -0,0 +1,98 @@
+import React from "react";
+import { Form, Field } from "react-final-form";
+import Collapsible from "react-collapsible";
+
+/**
+ * Component for accepting ComicVine search parameters
+ *
+ * @component
+ * @example
+ * const age = 21
+ * const name = 'Jitendra Nirnejak'
+ * return (
+ *   <User age={age} name={name} />
+ * )
+ */
+export const ComicVineSearchForm = () => {
+  const onSubmit = () => {
+    return true;
+  };
+  const validate = () => {
+    return true;
+  };
+
+  const MyForm = () => (
+    <Form
+      onSubmit={onSubmit}
+      validate={validate}
+      render={({ handleSubmit }) => (
+        <form onSubmit={handleSubmit}>
+          <span className="field is-normal">
+            <label className="label">Issue Details</label>
+          </span>
+          <div className="field is-horizontal">
+            <div className="field-body">
+              <div className="field">
+                <Field name="issueName">
+                  {(props) => (
+                    <p className="control is-expanded has-icons-left">
+                      <input
+                        {...props.input}
+                        className="input is-normal"
+                        placeholder="Type the issue name"
+                      />
+                      <span className="icon is-small is-left">
+                        <i className="fas fa-journal-whills"></i>
+                      </span>
+                    </p>
+                  )}
+                </Field>
+              </div>
+
+              <div className="field">
+                <Field name="issueNumber">
+                  {(props) => (
+                    <p className="control is-expanded has-icons-left">
+                      <input
+                        {...props.input}
+                        className="input is-normal"
+                        placeholder="Type the issue number"
+                      />
+                      <span className="icon is-small is-left">
+                        <i className="fas fa-hashtag"></i>
+                      </span>
+                    </p>
+                  )}
+                </Field>
+              </div>
+            </div>
+          </div>
+          <div className="field is-horizontal">
+            <div className="field-body">
+              <div className="field">
+                <div className="control">
+                  <button type="submit" className="button is-info is-small">
+                    Apply Criteria
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </form>
+      )}
+    />
+  );
+
+  return (
+    <Collapsible
+      trigger={"Search Manually"}
+      triggerTagName="a"
+      triggerClassName={"is-size-6"}
+      triggerOpenedClassName={"is-size-6"}
+    >
+      <MyForm />
+    </Collapsible>
+  );
+};
+
+export default ComicVineSearchForm;