✏️ Edit Metadata drawer scaffold

src/client/components/ComicDetail/ComicVineMatchPanel.tsx

@@ -1,7 +1,6 @@
 import React, { ReactElement } from "react";
 import { ComicVineSearchForm } from "../ComicVineSearchForm";
 import MatchResult from "../MatchResult";
-import Loader from "react-loader-spinner";
 import { isEmpty } from "lodash";
 
 export const ComicVineMatchPanel = (comicVineData): ReactElement => {
@@ -11,7 +10,6 @@ export const ComicVineMatchPanel = (comicVineData): ReactElement => {
     comicVineAPICallProgress,
     comicVineSearchResults,
   } = comicVineData.props;
-  console.log(comicVineData);
   return (
     <>
       {!isEmpty(comicVineSearchQueryObject) && (

src/client/components/ComicDetail/EditMetadataPanel.tsx

@@ -1,7 +1,62 @@
 import React, { ReactElement } from "react";
+import { Form, Field } from "react-final-form";
 
 export const EditMetadataPanel = (props): ReactElement => {
-  return <>adsasdasd</>;
+  const validate = async () => {};
+  const onSubmit = async () => {};
+  return (
+    <>
+      <Form
+        onSubmit={onSubmit}
+        validate={validate}
+        render={({ handleSubmit }) => (
+          <form onSubmit={handleSubmit}>
+            <h2>Metadata</h2>
+
+            <div className="field is-horizontal">
+              <div className="field-label is-normal">
+                <label className="label">Issue Name</label>
+              </div>
+              <div className="field-body">
+                <div className="field">
+                  <Field name="issue_name">
+                    {(props) => (
+                      <p className="control is-expanded has-icons-left">
+                        <input
+                          className="input"
+                          type="text"
+                          placeholder="Name"
+                        />
+                        <span className="icon is-small is-left">
+                          <i className="fas fa-user"></i>
+                        </span>
+                      </p>
+                    )}
+                  </Field>
+                </div>
+                <div className="field">
+                  <Field name="issue_number">
+                    {(props) => (
+                      <p className="control is-expanded has-icons-left">
+                        <input
+                          className="input"
+                          type="text"
+                          placeholder="Name"
+                        />
+                        <span className="icon is-small is-left">
+                          <i className="fas fa-user"></i>
+                        </span>
+                      </p>
+                    )}
+                  </Field>
+                </div>
+              </div>
+            </div>
+          </form>
+        )}
+      />
+    </>
+  );
 };
 
 export default EditMetadataPanel;