🌁 Added reference card for dc++ downloads

src/client/assets/scss/App.scss

@@ -215,6 +215,9 @@ pre {
     }
 
     .is-horizontal {
+      border: 1px solid #CCC;
+      border-radius: 0.25em;
+
       flex-direction: row;
       display: flex;
       flex-basis: 50ex;
@@ -225,7 +228,7 @@ pre {
       .card-image {
         align-self: center;
         .image {
-          max-width: 80px;
+          max-width: 50px;
           border-top-right-radius: 0;
           border-bottom-right-radius: 0;
           border-top-left-radius: 0.25em;

src/client/components/Carda.tsx

@@ -17,7 +17,24 @@ interface ICardProps {
 const renderCard = (props): ReactElement => {
   switch (props.orientation) {
     case "horizontal":
-      return <>horiztonal</>;
+      return (
+        <div className="card-container">
+          <div className="card generic-card">
+            <div className="is-horizontal">
+              <div className="card-image">
+                <img
+                  src={props.imageUrl}
+                  alt="Placeholder image"
+                  className="image"
+                />
+              </div>
+              {props.hasDetails && (
+                <div className="card-content">{props.children}</div>
+              )}
+            </div>
+          </div>
+        </div>
+      );
     case "vertical":
       return (
         <div onClick={props.onClick}>

src/client/components/Dashboard/RecentlyImported.tsx

@@ -61,6 +61,7 @@ export const RecentlyImported = ({
               </Link>
             );
             return (
+              <>
                 <Card
                   key={_id}
                   orientation={"vertical"}
@@ -108,6 +109,17 @@ export const RecentlyImported = ({
                     ) : null}
                   </div>
                 </Card>
+                {/* original reference */}
+                <Card
+                  orientation="horizontal"
+                  hasDetails
+                  imageUrl={sourcedMetadata.comicvine.image.icon_url}
+                >
+                  <dd className="is-size-7"> 
+                        <dl>asdasd</dl>
+                  </dd>
+                </Card>
+              </>
             );
           },
         )}