detail page components

src/components/detail/EpisodeRatingChip.tsx

@@ -0,0 +1,31 @@
+import { Star } from '../../lib/icons'
+import { useCinemetaEpisode } from '../../lib/episode-meta-context'
+import { parseImdbRating } from '../../lib/episode-meta'
+
+interface Props {
+  season: number | null | undefined
+  episode: number | null | undefined
+  /** Tuned for inline placement next to small meta text. */
+  size?: 'sm' | 'md'
+}
+
+/**
+ * Yellow IMDB pill rendered next to episode meta when Cinemeta has a
+ * rating for this S/E. Silently renders nothing when the data is missing,
+ * so it adds zero clutter to series Cinemeta hasn't indexed.
+ */
+export default function EpisodeRatingChip({ season, episode, size = 'sm' }: Props) {
+  const cinemeta = useCinemetaEpisode(season, episode)
+  const rating = parseImdbRating(cinemeta?.imdbRating)
+  if (rating == null) return null
+  const cls =
+    size === 'sm'
+      ? 'inline-flex items-center gap-1 h-4 px-1.5 rounded text-[10px] font-mono font-semibold text-yellow-300 bg-yellow-500/10 ring-1 ring-yellow-500/20 tabular-nums'
+      : 'inline-flex items-center gap-1 h-5 px-1.5 rounded text-[11px] font-mono font-semibold text-yellow-300 bg-yellow-500/10 ring-1 ring-yellow-500/20 tabular-nums'
+  return (
+    <span className={cls} title="IMDB rating (via Cinemeta)" aria-label={`IMDB rating ${rating.toFixed(1)}`}>
+      <Star size={size === 'sm' ? 9 : 10} className="text-yellow-400 fill-yellow-400" />
+      {rating.toFixed(1)}
+    </span>
+  )
+}