48 lines
2.1 KiB
TypeScript
48 lines
2.1 KiB
TypeScript
export type StreamInfo = {
|
|
live: boolean;
|
|
title?: string;
|
|
game?: string;
|
|
viewers?: number;
|
|
duration?: string;
|
|
};
|
|
|
|
export default function LiveBanner({ stream }: { stream: StreamInfo }) {
|
|
return (
|
|
<div className={`border rounded-lg p-5 flex items-center gap-5 transition-colors duration-300 ${
|
|
stream.live
|
|
? "bg-acid-green/10 border-acid-green/30"
|
|
: "bg-wy-surface border-wy-border"
|
|
}`}>
|
|
<div className="flex-1 min-w-0">
|
|
<div className="flex items-center gap-2 mb-2">
|
|
{stream.live ? (
|
|
<span className="flex items-center gap-1.5 text-xs font-mono tracking-widest text-red-400 bg-red-500/10 border border-red-500/30 px-2 py-1 rounded-md">
|
|
<span className="w-1.5 h-1.5 rounded-full bg-red-400 animate-pulse" />
|
|
EN DIRECT
|
|
</span>
|
|
) : (
|
|
<span className="text-xs font-mono tracking-widest text-wy-text-secondary bg-wy-surface border border-wy-border px-2 py-1 rounded-md">
|
|
HORS LIGNE
|
|
</span>
|
|
)}
|
|
{stream.duration && (
|
|
<span className="text-xs font-mono text-wy-text-secondary">{stream.duration}</span>
|
|
)}
|
|
</div>
|
|
<div className="text-white font-bold truncate">
|
|
{stream.title || "En attente du prochain stream..."}
|
|
</div>
|
|
{stream.game && (
|
|
<div className="text-sm text-wy-text-secondary font-mono mt-1">🎮 {stream.game}</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="text-right flex-shrink-0">
|
|
<div className={`text-4xl font-black leading-none ${stream.live ? "text-acid-green" : "text-wy-text-secondary"}`}>
|
|
{stream.viewers ?? 0}
|
|
</div>
|
|
<div className="text-xs font-mono tracking-widest text-wy-text-secondary mt-0.5">VIEWERS</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |