🔧 WIP Library

src/client/assets/scss/App.scss

@@ -59,6 +59,7 @@ $border-color: red;
   grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
   column-gap: 0.5em;
   row-gap: 1.2em;
+  min-height: 30px;
 
   .card {
     max-width: 500px;
@@ -75,13 +76,12 @@ $border-color: red;
         align-self: center;
         .image {
           max-width: 60px;
-          img {
             border-top-right-radius: 0;
             border-bottom-right-radius: 0;
             border-top-left-radius: 0.25em;
             border-bottom-left-radius: 0.25em;
-          }
         }
+         
       }
       .card-content {
         align-self: center;

src/client/components/Library.tsx

@@ -10,6 +10,7 @@ import {
   escapePoundSymbol,
 } from "../shared/utils/formatting.utils";
 import { useTable } from "react-table";
+import prettyBytes from "pretty-bytes";
 
 import { useDispatch, useSelector } from "react-redux";
 
@@ -27,8 +28,9 @@ export const Library = ({}: IComicBookLibraryProps): ReactElement => {
         Header: "Comic Metadata",
         columns: [
           {
-            Header: "Name",
+            Header: "File Details",
             accessor: "rawFileDetails",
+            // eslint-disable-next-line react/display-name
             Cell: (props) => {
               const encodedFilePath = encodeURI(
                 "http://localhost:3000" +
@@ -36,27 +38,29 @@ export const Library = ({}: IComicBookLibraryProps): ReactElement => {
               );
               const filePath = escapePoundSymbol(encodedFilePath);
               return (
-                  <div className="card-container">
+                <div className="card-container">
-                <div className="card">
+                  <div className="card">
-                  <div className="is-horizontal">
+                    <div className="is-horizontal">
-                    <div className="card-image">
+                      <div className="card-image">
-                      <figure>
+                        <figure>
-                        <img className="image" src={filePath} />
+                          <img className="image" src={filePath} />
-                      </figure>
+                        </figure>
-                    </div>
+                      </div>
-                    <div className="card-content">
+                      <ul className="card-content">
-                        <p>{props.cell.value.name}</p>
+                        <li>{props.cell.value.name}</li>
-                        {props.cell.value.containedIn}
+                        <li>{props.cell.value.containedIn}</li>
+                        <li>{prettyBytes(props.cell.value.fileSize)}</li>
+                      </ul>
                     </div>
                   </div>
                 </div>
-                </div>
               );
             },
           },
           {
             Header: "Import Status",
-            accessor: "",
+            accessor: "importStatus.isImported",
+            Cell: (props) => `${props.cell.value.toString()}`,
           },
         ],
       },