64 lines
2.1 KiB
TypeScript
64 lines
2.1 KiB
TypeScript
"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>
|
|
);
|
|
}
|