From 72a308801d0ac269f2aae2b193d77af6cb3e6652 Mon Sep 17 00:00:00 2001
From: Rishi Ghan <rishi.ghan@gmail.com>
Date: Mon, 11 Dec 2023 14:14:06 -0500
Subject: [PATCH] =?UTF-8?q?=F0=9F=8F=97=EF=B8=8F=20Added=20a=20horizontal?=
 =?UTF-8?q?=20medium=20variant?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/client/components/Dashboard/Dashboard.tsx | 13 ++++++++++--
 src/client/components/shared/Carda.tsx        | 21 +++++++++++++++++--
 2 files changed, 30 insertions(+), 4 deletions(-)

diff --git a/src/client/components/Dashboard/Dashboard.tsx b/src/client/components/Dashboard/Dashboard.tsx
index 3620993..d247b17 100644
--- a/src/client/components/Dashboard/Dashboard.tsx
+++ b/src/client/components/Dashboard/Dashboard.tsx
@@ -88,7 +88,7 @@ export const Dashboard = (): ReactElement => {
         <div className="grid grid-cols-5 gap-6">
           {recentComics?.data.docs.map((recentComic, idx) => (
             <Card
-              orientation="horizontal-2"
+              orientation="horizontal-2-medium"
               key={idx}
               imageUrl={`${LIBRARY_SERVICE_HOST}/${recentComic.rawFileDetails.cover.filePath}`}
               title={recentComic.inferredMetadata.issue.name}
@@ -96,7 +96,7 @@ export const Dashboard = (): ReactElement => {
             >
               <div>
                 <dt className="sr-only">Address</dt>
-                <dd className="text-sm my-1">
+                <dd className="text-sm my-1 flex flex-row gap-1">
                   <span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2.5 py-0.5 rounded-md dark:text-slate-900 dark:bg-slate-400">
                     <span className="pr-1 pt-1">
                       <i className="icon-[solar--hashtag-outline]"></i>
@@ -105,6 +105,15 @@ export const Dashboard = (): ReactElement => {
                       {recentComic.inferredMetadata.issue.number}
                     </span>
                   </span>
+                  <span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2.5 py-0.5 rounded-md dark:text-slate-900 dark:bg-slate-400">
+                    <span className="pr-1 pt-1">
+                      <i className="icon-[solar--file-bold-duotone] w-4 h-4"></i>
+                    </span>
+
+                    <span className="text-md text-slate-500">
+                      {recentComic.rawFileDetails.extension}
+                    </span>
+                  </span>
                 </dd>
               </div>
 
diff --git a/src/client/components/shared/Carda.tsx b/src/client/components/shared/Carda.tsx
index 7771ed9..a70c58f 100644
--- a/src/client/components/shared/Carda.tsx
+++ b/src/client/components/shared/Carda.tsx
@@ -107,19 +107,36 @@ const renderCard = (props: ICardProps): ReactElement => {
     case "horizontal-2-small":
       return (
         <>
-          <div className="flex flex-row justify-start align-top gap-3 bg-slate-400 h-fit rounded-md">
+          <div className="flex flex-row justify-start align-top gap-3 bg-slate-200 h-fit rounded-md shadow-md shadow-white-400">
             {/* thumbnail */}
             <div className="rounded-l-md overflow-hidden">
               <img src={props.imageUrl} className="object-cover h-20 w-20" />
             </div>
             {/* details */}
-            <div className="w-fit h-fit px-1 py-1">
+            <div className="w-fit h-fit pl-1 pr-2 py-1">
               <p className="text-sm">{props.title}</p>
               nothin
             </div>
           </div>
         </>
       );
+
+    case "horizontal-2-medium":
+      return (
+        <>
+          <div className="flex flex-row items-center align-top gap-3 bg-slate-200 h-fit p-2 rounded-md shadow-md shadow-white-400">
+            {/* thumbnail */}
+            <div className="rounded-md overflow-hidden">
+              <img src={props.imageUrl} />
+            </div>
+            {/* details */}
+            <div className="pl-1 pr-2 py-1">
+              <p className="text-sm">{props.title}</p>
+              {props.hasDetails && <>{props.children}</>}
+            </div>
+          </div>
+        </>
+      );
     default:
       return <></>;
   }