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.
47 lines
1.4 KiB
TypeScript
47 lines
1.4 KiB
TypeScript
import { ChevronUp, ChevronDown } from "lucide-react";
|
|
|
|
interface ChannelControlsProps {
|
|
channelNumber: number;
|
|
channelName: string;
|
|
onPrevChannel: () => void;
|
|
onNextChannel: () => void;
|
|
}
|
|
|
|
export function ChannelControls({
|
|
channelNumber,
|
|
channelName,
|
|
onPrevChannel,
|
|
onNextChannel,
|
|
}: ChannelControlsProps) {
|
|
return (
|
|
<div className="flex flex-col items-center gap-1 rounded-lg bg-black/60 p-3 backdrop-blur-md">
|
|
<button
|
|
onClick={onNextChannel}
|
|
aria-label="Next channel"
|
|
className="flex h-10 w-10 items-center justify-center rounded-md text-zinc-400 transition-colors hover:bg-zinc-700 hover:text-white active:scale-95"
|
|
>
|
|
<ChevronUp className="h-5 w-5" />
|
|
</button>
|
|
|
|
<div className="flex flex-col items-center px-2 py-1 text-center">
|
|
<span className="font-mono text-2xl font-bold tabular-nums text-white leading-none">
|
|
{channelNumber}
|
|
</span>
|
|
<span className="mt-0.5 max-w-20 truncate text-[10px] text-zinc-400">
|
|
{channelName}
|
|
</span>
|
|
</div>
|
|
|
|
<button
|
|
onClick={onPrevChannel}
|
|
aria-label="Previous channel"
|
|
className="flex h-10 w-10 items-center justify-center rounded-md text-zinc-400 transition-colors hover:bg-zinc-700 hover:text-white active:scale-95"
|
|
>
|
|
<ChevronDown className="h-5 w-5" />
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export type { ChannelControlsProps };
|