mirror of
https://github.com/ershisan99/podcaster.git
synced 2025-12-18 12:33:48 +00:00
feat: add conditional links to podcast info card
This commit is contained in:
@@ -1,3 +1,6 @@
|
|||||||
|
import { Link, useParams } from "react-router-dom";
|
||||||
|
import { Wrap } from "./wrap";
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
title: string;
|
title: string;
|
||||||
author: string;
|
author: string;
|
||||||
@@ -11,11 +14,23 @@ export function PodcastInfoCard({
|
|||||||
description,
|
description,
|
||||||
imageURL,
|
imageURL,
|
||||||
}: Props) {
|
}: Props) {
|
||||||
|
const { episodeId, podcastId } = useParams<{
|
||||||
|
episodeId?: string;
|
||||||
|
podcastId?: string;
|
||||||
|
}>();
|
||||||
|
|
||||||
|
const href = `/podcast/${podcastId}`;
|
||||||
|
const shouldWrapWithLink = !!episodeId;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
|
<Wrap if={shouldWrapWithLink} with={Link} wrapperProps={{ to: href }}>
|
||||||
|
<img src={imageURL} alt={title} />
|
||||||
|
</Wrap>
|
||||||
|
<Wrap if={shouldWrapWithLink} with={Link} wrapperProps={{ to: href }}>
|
||||||
<h1>{title}</h1>
|
<h1>{title}</h1>
|
||||||
<h2>{author}</h2>
|
<h2>{author}</h2>
|
||||||
<img src={imageURL} alt={title} />
|
</Wrap>
|
||||||
<p>{description}</p>
|
<p>{description}</p>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
21
src/components/wrap.tsx
Normal file
21
src/components/wrap.tsx
Normal file
@@ -0,0 +1,21 @@
|
|||||||
|
import { createElement, ReactNode } from "react";
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
if?: boolean;
|
||||||
|
with: (typeof createElement.arguments)[0];
|
||||||
|
wrapperProps: (typeof createElement.arguments)[1];
|
||||||
|
children: NonNullable<ReactNode>;
|
||||||
|
};
|
||||||
|
|
||||||
|
export function Wrap({
|
||||||
|
if: condition,
|
||||||
|
with: wrapper,
|
||||||
|
wrapperProps,
|
||||||
|
children,
|
||||||
|
}: Props) {
|
||||||
|
return condition ? (
|
||||||
|
createElement(wrapper, wrapperProps, [children])
|
||||||
|
) : (
|
||||||
|
<>{children}</>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user