chore: refactor podcast info into a separate component

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>
+  );
+};

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>
+      <PodcastInfoCard
-        <h1>{podcast.title}</h1>
+        author={podcast.author}
-        <h2>{podcast.author}</h2>
+        title={podcast.title}
-        <img src={episodesData?.podcast?.images.large} alt={podcast.title} />
+        description={podcast.description}
-        <p>{podcast.description}</p>
+        imageURL={episodesData?.podcast.images.large ?? ""}
-      </div>
+      />
       <div>Episodes: {episodesData?.podcast.trackCount}</div>
       <div>
         <table>