From 172e9e4c1032b810044a8d412b389dc85b2b3ffc Mon Sep 17 00:00:00 2001
From: Andres <andres99.dev@gmail.com>
Date: Fri, 19 Apr 2024 12:47:07 +0200
Subject: [PATCH] chore: refactor podcast info into a separate component

---
 src/components/podcast-info-card.tsx | 22 ++++++++++++++++++++++
 src/pages/podcast.tsx                | 13 +++++++------
 2 files changed, 29 insertions(+), 6 deletions(-)
 create mode 100644 src/components/podcast-info-card.tsx

diff --git a/src/components/podcast-info-card.tsx b/src/components/podcast-info-card.tsx
new file mode 100644
index 0000000..8fb2df9
--- /dev/null
+++ b/src/components/podcast-info-card.tsx
@@ -0,0 +1,22 @@
+type Props = {
+  title: string;
+  author: string;
+  description: string;
+  imageURL: string;
+};
+
+export const PodcastInfoCard = ({
+  title,
+  author,
+  description,
+  imageURL,
+}: Props) => {
+  return (
+    <div>
+      <h1>{title}</h1>
+      <h2>{author}</h2>
+      <img src={imageURL} alt={title} />
+      <p>{description}</p>
+    </div>
+  );
+};
diff --git a/src/pages/podcast.tsx b/src/pages/podcast.tsx
index 4f9c404..ce63194 100644
--- a/src/pages/podcast.tsx
+++ b/src/pages/podcast.tsx
@@ -3,6 +3,7 @@ import {
   usePodcastEpisodesQuery,
   useTopPodcastsQuery,
 } from "../services/podcasts/podcast.hooks";
+import { PodcastInfoCard } from "../components/podcast-info-card";
 
 export function Podcast() {
   const { podcastId } = useParams<{ podcastId: string }>();
@@ -28,12 +29,12 @@ export function Podcast() {
   // TODO: break into smaller components
   return (
     <div>
-      <div>
-        <h1>{podcast.title}</h1>
-        <h2>{podcast.author}</h2>
-        <img src={episodesData?.podcast?.images.large} alt={podcast.title} />
-        <p>{podcast.description}</p>
-      </div>
+      <PodcastInfoCard
+        author={podcast.author}
+        title={podcast.title}
+        description={podcast.description}
+        imageURL={episodesData?.podcast.images.large ?? ""}
+      />
       <div>Episodes: {episodesData?.podcast.trackCount}</div>
       <div>
         <table>