feat: make PodcastPreviewCard a link to navigate to the podcast page

This commit is contained in:
2024-04-18 16:52:16 +02:00
parent de9eafdaa8
commit ad58fbb47e
2 changed files with 12 additions and 3 deletions

View File

@@ -1,15 +1,23 @@
import { Link } from "react-router-dom";
type Props = { type Props = {
title: string; title: string;
author: string; author: string;
imageUrl: string; imageUrl: string;
detailUrl: string;
}; };
export function PodcastPreviewCard({ title, author, imageUrl }: Props) { export function PodcastPreviewCard({
title,
author,
imageUrl,
detailUrl,
}: Props) {
return ( return (
<div> <Link to={detailUrl}>
<img src={imageUrl} alt={title} /> <img src={imageUrl} alt={title} />
<h3>{title}</h3> <h3>{title}</h3>
<h4>{author}</h4> <h4>{author}</h4>
</div> </Link>
); );
} }

View File

@@ -10,6 +10,7 @@ export function Home() {
<div className={"grid grid-cols-4"}> <div className={"grid grid-cols-4"}>
{data?.map((podcast) => ( {data?.map((podcast) => (
<PodcastPreviewCard <PodcastPreviewCard
detailUrl={`/podcast/${podcast.id}`}
key={podcast.id} key={podcast.id}
title={podcast.title} title={podcast.title}
author={podcast.author} author={podcast.author}