fix keyboard, finish 05

src/components/TrendingShows.tsx

@@ -0,0 +1,55 @@
+/**
+ * TrendingShows component - Grid/list of trending podcasts
+ */
+
+import { For, Show } from "solid-js"
+import type { Podcast } from "../types/podcast"
+import { PodcastCard } from "./PodcastCard"
+
+type TrendingShowsProps = {
+  podcasts: Podcast[]
+  selectedIndex: number
+  focused: boolean
+  isLoading: boolean
+  onSelect?: (index: number) => void
+  onSubscribe?: (podcast: Podcast) => void
+}
+
+export function TrendingShows(props: TrendingShowsProps) {
+  return (
+    <box flexDirection="column" height="100%">
+      <Show when={props.isLoading}>
+        <box padding={2}>
+          <text>
+            <span fg="yellow">Loading trending shows...</span>
+          </text>
+        </box>
+      </Show>
+
+      <Show when={!props.isLoading && props.podcasts.length === 0}>
+        <box padding={2}>
+          <text>
+            <span fg="gray">No podcasts found in this category.</span>
+          </text>
+        </box>
+      </Show>
+
+      <Show when={!props.isLoading && props.podcasts.length > 0}>
+        <scrollbox height="100%" showScrollIndicator>
+          <box flexDirection="column">
+            <For each={props.podcasts}>
+              {(podcast, index) => (
+                <PodcastCard
+                  podcast={podcast}
+                  selected={index() === props.selectedIndex && props.focused}
+                  onSelect={() => props.onSelect?.(index())}
+                  onSubscribe={() => props.onSubscribe?.(podcast)}
+                />
+              )}
+            </For>
+          </box>
+        </scrollbox>
+      </Show>
+    </box>
+  )
+}