cooking

src/pages/Discover/PodcastCard.tsx

@@ -0,0 +1,77 @@
+/**
+ * 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>
+  );
+}