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.
65 lines
1.9 KiB
TypeScript
65 lines
1.9 KiB
TypeScript
import { CalendarClock } from "lucide-react";
|
||
import { cn } from "@/lib/utils";
|
||
|
||
export interface ScheduleSlot {
|
||
id: string;
|
||
title: string;
|
||
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>
|
||
<p className="mt-0.5 font-mono text-[10px] text-zinc-600">
|
||
{slot.startTime} – {slot.endTime}
|
||
</p>
|
||
</div>
|
||
</li>
|
||
))}
|
||
</ul>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export type { ScheduleOverlayProps };
|