feat(frontend): add ShowTile, SeasonTile, BreadcrumbNav components

2026-03-20 01:19:08 +01:00
parent 5b89481104
commit 5cc4cde223
3 changed files with 179 additions and 0 deletions
--- a/k-tv-frontend/app/(main)/library/components/season-tile.tsx
+++ b/k-tv-frontend/app/(main)/library/components/season-tile.tsx
@@ -0,0 +1,63 @@
+"use client";
+
+import { Film } from "lucide-react";
+import type { SeasonSummary } from "@/lib/types";
+
+interface Props {
+  season: SeasonSummary;
+  selected: boolean;
+  onToggle: () => void;
+  onClick: () => void;
+}
+
+export function SeasonTile({ season, selected, onToggle, onClick }: Props) {
+  return (
+    <div className="group relative flex flex-col overflow-hidden rounded-lg border border-zinc-800 bg-zinc-900 transition-colors hover:border-zinc-600">
+      <button
+        type="button"
+        className="relative aspect-video w-full overflow-hidden bg-zinc-800"
+        onClick={onClick}
+      >
+        {season.thumbnail_url ? (
+          // eslint-disable-next-line @next/next/no-img-element
+          <img
+            src={season.thumbnail_url}
+            alt={`Season ${season.season_number}`}
+            className="h-full w-full object-cover transition-transform group-hover:scale-105"
+          />
+        ) : (
+          <div className="flex h-full w-full items-center justify-center">
+            <Film className="h-10 w-10 text-zinc-600" />
+          </div>
+        )}
+        {selected && (
+          <div className="absolute inset-0 bg-blue-600/30 ring-2 ring-inset ring-blue-500" />
+        )}
+      </button>
+
+      <div className="flex flex-col gap-1 p-2">
+        <button
+          type="button"
+          className="truncate text-left text-sm font-medium text-zinc-100 hover:text-white"
+          onClick={onClick}
+        >
+          Season {season.season_number}
+        </button>
+        <p className="text-xs text-zinc-500">{season.episode_count} episodes</p>
+      </div>
+
+      <button
+        type="button"
+        onClick={e => { e.stopPropagation(); onToggle(); }}
+        className={`absolute left-1.5 top-1.5 flex h-5 w-5 items-center justify-center rounded border text-xs font-bold transition-opacity ${
+          selected
+            ? "border-blue-500 bg-blue-600 text-white opacity-100"
+            : "border-zinc-600 bg-zinc-900/80 text-transparent opacity-0 group-hover:opacity-100"
+        }`}
+        aria-label={selected ? "Deselect" : "Select"}
+      >
+        ✓
+      </button>
+    </div>
+  );
+}