74 lines
2.1 KiB
TypeScript
74 lines
2.1 KiB
TypeScript
/**
|
|
* PodcastCard component - Reusable card for displaying podcast info
|
|
*/
|
|
|
|
import { Show, For } from "solid-js"
|
|
import type { Podcast } from "../types/podcast"
|
|
|
|
type PodcastCardProps = {
|
|
podcast: Podcast
|
|
selected: boolean
|
|
compact?: boolean
|
|
onSelect?: () => void
|
|
onSubscribe?: () => void
|
|
}
|
|
|
|
export function PodcastCard(props: PodcastCardProps) {
|
|
const handleSubscribeClick = () => {
|
|
props.onSubscribe?.()
|
|
}
|
|
|
|
return (
|
|
<box
|
|
flexDirection="column"
|
|
padding={1}
|
|
backgroundColor={props.selected ? "#333" : undefined}
|
|
onMouseDown={props.onSelect}
|
|
>
|
|
{/* Title Row */}
|
|
<box flexDirection="row" gap={2} alignItems="center">
|
|
<text fg={props.selected ? "cyan" : "white"}>
|
|
<strong>{props.podcast.title}</strong>
|
|
</text>
|
|
|
|
<Show when={props.podcast.isSubscribed}>
|
|
<text fg="green">[+]</text>
|
|
</Show>
|
|
</box>
|
|
|
|
{/* Author */}
|
|
<Show when={props.podcast.author && !props.compact}>
|
|
<text fg="gray">by {props.podcast.author}</text>
|
|
</Show>
|
|
|
|
{/* Description */}
|
|
<Show when={props.podcast.description && !props.compact}>
|
|
<text fg={props.selected ? "white" : "gray"}>
|
|
{props.podcast.description!.length > 80
|
|
? props.podcast.description!.slice(0, 80) + "..."
|
|
: props.podcast.description}
|
|
</text>
|
|
</Show>
|
|
|
|
{/* Categories and Subscribe Button */}
|
|
<box flexDirection="row" justifyContent="space-between" marginTop={props.compact ? 0 : 1}>
|
|
<box flexDirection="row" gap={1}>
|
|
<Show when={(props.podcast.categories ?? []).length > 0}>
|
|
<For each={(props.podcast.categories ?? []).slice(0, 2)}>
|
|
{(cat) => <text fg="yellow">[{cat}]</text>}
|
|
</For>
|
|
</Show>
|
|
</box>
|
|
|
|
<Show when={props.selected}>
|
|
<box onMouseDown={handleSubscribeClick}>
|
|
<text fg={props.podcast.isSubscribed ? "red" : "green"}>
|
|
{props.podcast.isSubscribed ? "[Unsubscribe]" : "[Subscribe]"}
|
|
</text>
|
|
</box>
|
|
</Show>
|
|
</box>
|
|
</box>
|
|
)
|
|
}
|