From fd41dc54bc87c5ef5ae3d21907bf051c8de71348 Mon Sep 17 00:00:00 2001
From: andres <andres99.dev@gmail.com>
Date: Sun, 21 Apr 2024 00:25:14 +0200
Subject: [PATCH] feat: add podcast info card styles

---
 src/components/podcast-info-card.tsx | 30 ++++++++++++++++++----------
 src/pages/podcast.tsx                |  2 +-
 2 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/src/components/podcast-info-card.tsx b/src/components/podcast-info-card.tsx
index 19e2095..cb1489a 100644
--- a/src/components/podcast-info-card.tsx
+++ b/src/components/podcast-info-card.tsx
@@ -23,15 +23,25 @@ export function PodcastInfoCard({
   const shouldWrapWithLink = !!episodeId;
 
   return (
-    <div>
-      <Wrap if={shouldWrapWithLink} with={Link} wrapperProps={{ to: href }}>
-        <img src={imageURL} alt={title} />
-      </Wrap>
-      <Wrap if={shouldWrapWithLink} with={Link} wrapperProps={{ to: href }}>
-        <h1>{title}</h1>
-        <h2>{author}</h2>
-      </Wrap>
-      <p dangerouslySetInnerHTML={{ __html: description }}></p>
-    </div>
+    <aside className={"h-fit w-1/3 px-2 py-6 shadow-md"}>
+      <div className={"border-b px-10 pb-4"}>
+        <Wrap if={shouldWrapWithLink} with={Link} wrapperProps={{ to: href }}>
+          <img src={imageURL} alt={title} />
+        </Wrap>
+      </div>
+      <div className={"border-b px-2 py-4"}>
+        <Wrap if={shouldWrapWithLink} with={Link} wrapperProps={{ to: href }}>
+          <strong className={"block"}>{title}</strong>
+          <em className={"text-sm"}>by {author}</em>
+        </Wrap>
+      </div>
+      <div>
+        <strong className={"text-sm"}>Description:</strong>
+        <div
+          className={"text-sm italic"}
+          dangerouslySetInnerHTML={{ __html: description }}
+        ></div>
+      </div>
+    </aside>
   );
 }
diff --git a/src/pages/podcast.tsx b/src/pages/podcast.tsx
index cd80721..09db938 100644
--- a/src/pages/podcast.tsx
+++ b/src/pages/podcast.tsx
@@ -18,7 +18,7 @@ export function Podcast() {
   }
 
   return (
-    <div>
+    <div className={"flex gap-10"}>
       <PodcastInfoCard
         author={podcast.author}
         title={podcast.title}