🧱 Broke Library into components

src/client/components/Library/ComicVineDetails.tsx

@@ -0,0 +1,37 @@
+import React, { ReactElement } from "react";
+import PropTypes from "prop-types";
+import ellipsize from "ellipsize";
+
+export const ComicVineDetails = (comicVineData): ReactElement => {
+  const { data } = comicVineData;
+  return (
+    <div className="card-container">
+      <div className="card">
+        <div className="is-horizontal">
+          <div className="card-image">
+            <figure>
+              <img className="image" src={data.comicvine.image.thumb_url} />
+            </figure>
+          </div>
+          <ul className="card-content">
+            <li className="name has-text-weight-medium">
+              {ellipsize(data.name, 18)}
+            </li>
+            <li>
+              <div className="control">
+                <div className="tags has-addons">
+                  <span className="tag is-primary is-light">ComicVine ID</span>
+                  <span className="tag is-info is-light">
+                    {data.comicvine.id}
+                  </span>
+                </div>
+              </div>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ComicVineDetails;

src/client/components/Library/RawFileDetails.tsx

@@ -0,0 +1,59 @@
+import React, { ReactElement } from "react";
+import PropTypes from "prop-types";
+import { escapePoundSymbol } from "../../shared/utils/formatting.utils";
+import prettyBytes from "pretty-bytes";
+import ellipsize from "ellipsize";
+import { IMPORT_SERVICE_HOST } from "../../constants/endpoints";
+
+// raw file details
+export const RawFileDetails = (rawFileData): ReactElement => {
+  const { data } = rawFileData;
+  const encodedFilePath = encodeURI(
+    `${IMPORT_SERVICE_HOST}/${data.cover.filePath}`,
+  );
+  const filePath = escapePoundSymbol(encodedFilePath);
+  return (
+    <div className="card-container">
+      <div className="card">
+        <div className="is-horizontal">
+          <div className="card-image">
+            <figure>
+              <img className="image" src={filePath} />
+            </figure>
+          </div>
+          <ul className="card-content">
+            <li className="name has-text-weight-medium">
+              {ellipsize(data.name, 18)}
+            </li>
+            <li>
+              <div className="control">
+                <div className="tags has-addons">
+                  <span className="tag is-primary is-light">
+                    {data.extension}
+                  </span>
+                  <span className="tag is-info is-light">
+                    {prettyBytes(data.fileSize)}
+                  </span>
+                </div>
+              </div>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default RawFileDetails;
+
+RawFileDetails.propTypes = {
+  data: PropTypes.shape({
+    cover: PropTypes.shape({
+      filePath: PropTypes.string,
+    }),
+    name: PropTypes.string,
+    path: PropTypes.string,
+    fileSize: PropTypes.number,
+    extension: PropTypes.string,
+  }),
+};

src/client/components/Library/SearchBar.tsx

@@ -0,0 +1,54 @@
+import React, { ReactElement } from "react";
+import PropTypes from "prop-types";
+import { Form, Field } from "react-final-form";
+import { Link } from "react-router-dom";
+
+export const SearchBar = (): ReactElement => {
+  const foo = () => {};
+  return (
+    <div className="box columns sticky">
+      <Form
+        onSubmit={foo}
+        initialValues={{}}
+        render={({ handleSubmit, form, submitting, pristine, values }) => (
+          <div className="column is-three-quarters search">
+            <label>Search</label>
+            <Field name="search">
+              {({ input, meta }) => {
+                return (
+                  <input
+                    {...input}
+                    className="input main-search-bar is-medium"
+                    placeholder="Type an issue/volume name"
+                  />
+                );
+              }}
+            </Field>
+          </div>
+        )}
+      />
+      <div className="column one-fifth">
+        <div className="field has-addons">
+          <p className="control">
+            <button className="button">
+              <span className="icon is-small">
+                <i className="fa-solid fa-list"></i>
+              </span>
+            </button>
+          </p>
+          <p className="control">
+            <button className="button">
+              <Link to="/library-grid">
+                <span className="icon is-small">
+                  <i className="fa-solid fa-image"></i>
+                </span>
+              </Link>
+            </button>
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default SearchBar;