79 lines
2.5 KiB
TypeScript
79 lines
2.5 KiB
TypeScript
import { CalendarClock } from "lucide-react";
|
||
import { cn } from "@/lib/utils";
|
||
|
||
export interface ScheduleSlot {
|
||
id: string;
|
||
/** Headline: series name for episodes, film title for everything else. */
|
||
title: string;
|
||
/** Secondary line: "S1 · E3 · Episode Title" for episodes, year for movies. */
|
||
subtitle?: string | null;
|
||
/** Rounded slot duration in minutes. */
|
||
durationMins: number;
|
||
startTime: string; // "HH:MM"
|
||
endTime: string; // "HH:MM"
|
||
isCurrent?: boolean;
|
||
}
|
||
|
||
interface ScheduleOverlayProps {
|
||
channelName: string;
|
||
slots: ScheduleSlot[];
|
||
}
|
||
|
||
export function ScheduleOverlay({ channelName, slots }: ScheduleOverlayProps) {
|
||
return (
|
||
<div className="flex h-full w-80 flex-col rounded-lg bg-black/70 backdrop-blur-md overflow-hidden">
|
||
{/* Header */}
|
||
<div className="flex items-center gap-2 border-b border-zinc-700/60 px-4 py-3">
|
||
<CalendarClock className="h-4 w-4 text-zinc-400 shrink-0" />
|
||
<span className="truncate text-sm font-medium text-zinc-200">{channelName}</span>
|
||
</div>
|
||
|
||
{/* Slots */}
|
||
<ul className="flex-1 overflow-y-auto">
|
||
{slots.map((slot) => (
|
||
<li
|
||
key={slot.id}
|
||
className={cn(
|
||
"flex items-start gap-3 border-b border-zinc-800/60 px-4 py-3 transition-colors last:border-0",
|
||
slot.isCurrent && "bg-white/5"
|
||
)}
|
||
>
|
||
{/* Current indicator */}
|
||
<span
|
||
className={cn(
|
||
"mt-0.5 h-2 w-2 shrink-0 rounded-full",
|
||
slot.isCurrent ? "bg-white" : "bg-transparent"
|
||
)}
|
||
/>
|
||
|
||
<div className="min-w-0 flex-1">
|
||
<p
|
||
className={cn(
|
||
"truncate text-sm font-medium leading-snug",
|
||
slot.isCurrent ? "text-white" : "text-zinc-400"
|
||
)}
|
||
>
|
||
{slot.title}
|
||
</p>
|
||
{slot.subtitle && (
|
||
<p className={cn(
|
||
"truncate text-xs leading-snug",
|
||
slot.isCurrent ? "text-zinc-400" : "text-zinc-600"
|
||
)}>
|
||
{slot.subtitle}
|
||
</p>
|
||
)}
|
||
<p className="mt-0.5 font-mono text-[10px] text-zinc-600">
|
||
{slot.startTime} – {slot.endTime}
|
||
{" · "}{slot.durationMins}m
|
||
</p>
|
||
</div>
|
||
</li>
|
||
))}
|
||
</ul>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export type { ScheduleOverlayProps };
|