Gabriel Kaszewski
01108aa23e
- Added package.json with dependencies and scripts for development, build, and linting. - Created postcss.config.mjs for Tailwind CSS integration. - Added SVG assets for UI components including file, globe, next, vercel, and window icons. - Configured TypeScript with tsconfig.json for strict type checking and module resolution.
63 lines
1.8 KiB
TypeScript
63 lines
1.8 KiB
TypeScript
interface ChannelInfoProps {
|
||
channelNumber: number;
|
||
channelName: string;
|
||
showTitle: string;
|
||
showStartTime: string; // "HH:MM"
|
||
showEndTime: string; // "HH:MM"
|
||
/** Progress through the current show, 0–100 */
|
||
progress: number;
|
||
description?: string;
|
||
}
|
||
|
||
export function ChannelInfo({
|
||
channelNumber,
|
||
channelName,
|
||
showTitle,
|
||
showStartTime,
|
||
showEndTime,
|
||
progress,
|
||
description,
|
||
}: ChannelInfoProps) {
|
||
const clampedProgress = Math.min(100, Math.max(0, progress));
|
||
|
||
return (
|
||
<div className="flex flex-col gap-2 rounded-lg bg-black/60 p-4 backdrop-blur-md w-80">
|
||
{/* Channel badge */}
|
||
<div className="flex items-center gap-2">
|
||
<span className="flex h-7 min-w-9 items-center justify-center rounded bg-white px-1.5 font-mono text-xs font-bold text-black">
|
||
{channelNumber}
|
||
</span>
|
||
<span className="truncate text-sm font-medium text-zinc-300">
|
||
{channelName}
|
||
</span>
|
||
</div>
|
||
|
||
{/* Show title */}
|
||
<p className="text-base font-semibold leading-tight text-white">
|
||
{showTitle}
|
||
</p>
|
||
|
||
{/* Description */}
|
||
{description && (
|
||
<p className="line-clamp-2 text-xs text-zinc-400">{description}</p>
|
||
)}
|
||
|
||
{/* Progress bar */}
|
||
<div className="flex flex-col gap-1">
|
||
<div className="h-1 w-full overflow-hidden rounded-full bg-zinc-700">
|
||
<div
|
||
className="h-full rounded-full bg-white transition-all duration-500"
|
||
style={{ width: `${clampedProgress}%` }}
|
||
/>
|
||
</div>
|
||
<div className="flex justify-between font-mono text-[10px] text-zinc-500">
|
||
<span>{showStartTime}</span>
|
||
<span>{showEndTime}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export type { ChannelInfoProps };
|