mirror of
https://github.com/ershisan99/podcaster.git
synced 2025-12-17 05:09:27 +00:00
feat: make PodcastPreviewCard a link to navigate to the podcast page
This commit is contained in:
@@ -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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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}
|
||||||
|
|||||||
Reference in New Issue
Block a user