feat(frontend): add ShowTile, SeasonTile, BreadcrumbNav components
This commit is contained in:
@@ -0,0 +1,41 @@
|
||||
interface Props {
|
||||
series?: string;
|
||||
season?: number;
|
||||
onNavigate: (target: "root" | "series") => void;
|
||||
}
|
||||
|
||||
export function BreadcrumbNav({ series, season, onNavigate }: Props) {
|
||||
return (
|
||||
<nav className="flex items-center gap-1 px-1 py-2 text-sm">
|
||||
<button
|
||||
type="button"
|
||||
className="text-zinc-400 hover:text-zinc-100 transition-colors"
|
||||
onClick={() => onNavigate("root")}
|
||||
>
|
||||
Library
|
||||
</button>
|
||||
{series && (
|
||||
<>
|
||||
<span className="text-zinc-600">›</span>
|
||||
{season != null ? (
|
||||
<button
|
||||
type="button"
|
||||
className="text-zinc-400 hover:text-zinc-100 transition-colors"
|
||||
onClick={() => onNavigate("series")}
|
||||
>
|
||||
{series}
|
||||
</button>
|
||||
) : (
|
||||
<span className="text-zinc-100">{series}</span>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
{season != null && (
|
||||
<>
|
||||
<span className="text-zinc-600">›</span>
|
||||
<span className="text-zinc-100">Season {season}</span>
|
||||
</>
|
||||
)}
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
63
k-tv-frontend/app/(main)/library/components/season-tile.tsx
Normal file
63
k-tv-frontend/app/(main)/library/components/season-tile.tsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
75
k-tv-frontend/app/(main)/library/components/show-tile.tsx
Normal file
75
k-tv-frontend/app/(main)/library/components/show-tile.tsx
Normal file
@@ -0,0 +1,75 @@
|
||||
"use client";
|
||||
|
||||
import { Tv } from "lucide-react";
|
||||
import type { ShowSummary } from "@/lib/types";
|
||||
|
||||
interface Props {
|
||||
show: ShowSummary;
|
||||
selected: boolean;
|
||||
onToggle: () => void;
|
||||
onClick: () => void;
|
||||
}
|
||||
|
||||
export function ShowTile({ show, 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">
|
||||
{/* Thumbnail area - clickable to drill in */}
|
||||
<button
|
||||
type="button"
|
||||
className="relative aspect-video w-full overflow-hidden bg-zinc-800"
|
||||
onClick={onClick}
|
||||
>
|
||||
{show.thumbnail_url ? (
|
||||
// eslint-disable-next-line @next/next/no-img-element
|
||||
<img
|
||||
src={show.thumbnail_url}
|
||||
alt={show.series_name}
|
||||
className="h-full w-full object-cover transition-transform group-hover:scale-105"
|
||||
/>
|
||||
) : (
|
||||
<div className="flex h-full w-full items-center justify-center">
|
||||
<Tv className="h-10 w-10 text-zinc-600" />
|
||||
</div>
|
||||
)}
|
||||
{/* Selection overlay */}
|
||||
{selected && (
|
||||
<div className="absolute inset-0 bg-blue-600/30 ring-2 ring-inset ring-blue-500" />
|
||||
)}
|
||||
</button>
|
||||
|
||||
{/* Info area */}
|
||||
<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}
|
||||
title={show.series_name}
|
||||
>
|
||||
{show.series_name}
|
||||
</button>
|
||||
<p className="text-xs text-zinc-500">
|
||||
{show.season_count} {show.season_count === 1 ? "season" : "seasons"} · {show.episode_count} eps
|
||||
</p>
|
||||
{show.genres.length > 0 && (
|
||||
<p className="truncate text-xs text-zinc-600">
|
||||
{show.genres.slice(0, 3).join(", ")}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Select checkbox */}
|
||||
<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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user