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.
43 lines
1.3 KiB
TypeScript
43 lines
1.3 KiB
TypeScript
import { ArrowRight } from "lucide-react";
|
|
|
|
interface UpNextBannerProps {
|
|
nextShowTitle: string;
|
|
/** Minutes remaining until the next show */
|
|
minutesUntil: number;
|
|
nextShowStartTime: string; // "HH:MM"
|
|
}
|
|
|
|
export function UpNextBanner({
|
|
nextShowTitle,
|
|
minutesUntil,
|
|
nextShowStartTime,
|
|
}: UpNextBannerProps) {
|
|
const timeLabel =
|
|
minutesUntil <= 1 ? "Starting now" : `In ${minutesUntil} min`;
|
|
|
|
return (
|
|
<div className="flex w-full items-center gap-3 rounded-lg bg-black/70 px-5 py-3 backdrop-blur-md">
|
|
{/* Label */}
|
|
<div className="flex shrink-0 flex-col">
|
|
<span className="text-[10px] font-semibold uppercase tracking-widest text-zinc-500">
|
|
Up Next
|
|
</span>
|
|
<span className="font-mono text-xs text-zinc-400">{timeLabel}</span>
|
|
</div>
|
|
|
|
<div className="h-8 w-px shrink-0 bg-zinc-700" />
|
|
|
|
{/* Show info */}
|
|
<div className="flex min-w-0 flex-1 items-center gap-2">
|
|
<ArrowRight className="h-4 w-4 shrink-0 text-zinc-500" />
|
|
<p className="truncate text-sm font-medium text-white">{nextShowTitle}</p>
|
|
<span className="ml-auto shrink-0 font-mono text-xs text-zinc-500">
|
|
{nextShowStartTime}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export type { UpNextBannerProps };
|