From ad58fbb47edfff7a4e66244c07163898825a0195 Mon Sep 17 00:00:00 2001
From: Andres <andres99.dev@gmail.com>
Date: Thu, 18 Apr 2024 16:52:16 +0200
Subject: [PATCH] feat: make PodcastPreviewCard a link to navigate to the
 podcast page

---
 src/components/podcast-preview-card.tsx | 14 +++++++++++---
 src/pages/home.tsx                      |  1 +
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/components/podcast-preview-card.tsx b/src/components/podcast-preview-card.tsx
index 6de66fa..9b69dbc 100644
--- a/src/components/podcast-preview-card.tsx
+++ b/src/components/podcast-preview-card.tsx
@@ -1,15 +1,23 @@
+import { Link } from "react-router-dom";
+
 type Props = {
   title: string;
   author: string;
   imageUrl: string;
+  detailUrl: string;
 };
 
-export function PodcastPreviewCard({ title, author, imageUrl }: Props) {
+export function PodcastPreviewCard({
+  title,
+  author,
+  imageUrl,
+  detailUrl,
+}: Props) {
   return (
-    <div>
+    <Link to={detailUrl}>
       <img src={imageUrl} alt={title} />
       <h3>{title}</h3>
       <h4>{author}</h4>
-    </div>
+    </Link>
   );
 }
diff --git a/src/pages/home.tsx b/src/pages/home.tsx
index e5b4f5f..9ebc524 100644
--- a/src/pages/home.tsx
+++ b/src/pages/home.tsx
@@ -10,6 +10,7 @@ export function Home() {
       <div className={"grid grid-cols-4"}>
         {data?.map((podcast) => (
           <PodcastPreviewCard
+            detailUrl={`/podcast/${podcast.id}`}
             key={podcast.id}
             title={podcast.title}
             author={podcast.author}