perf: change the DA to something more readable

This commit is contained in:
Pierre Ryssen
2026-03-11 12:26:45 +01:00
parent cd15c81b53
commit 9642f2511a
22 changed files with 136 additions and 120 deletions

View File

@@ -8,40 +8,40 @@ export type StreamInfo = {
export default function LiveBanner({ stream }: { stream: StreamInfo }) {
return (
<div className={`border rounded-sm p-5 flex items-center gap-5 transition-colors duration-300 ${
<div className={`border rounded-lg p-5 flex items-center gap-5 transition-colors duration-300 ${
stream.live
? "bg-[#4aff8c]/3 border-[#4aff8c]/20"
: "bg-white/[0.02] border-[#1a2a1a]"
? "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-[9px] font-mono tracking-[0.2em] text-red-400 bg-red-500/10 border border-red-500/20 px-2 py-1 rounded-sm">
<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-[9px] font-mono tracking-[0.2em] text-[#3a5a3a] bg-white/[0.02] border border-[#1a2a1a] px-2 py-1 rounded-sm">
<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-[10px] font-mono text-[#3a5a3a]">{stream.duration}</span>
<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-[12px] text-[#3a5a3a] font-mono mt-1">🎮 {stream.game}</div>
<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-3xl font-black leading-none ${stream.live ? "text-[#4aff8c]" : "text-[#2a3a2a]"}`}>
<div className={`text-4xl font-black leading-none ${stream.live ? "text-acid-green" : "text-wy-text-secondary"}`}>
{stream.viewers ?? 0}
</div>
<div className="text-[9px] font-mono tracking-widest text-[#3a5a3a] mt-0.5">VIEWERS</div>
<div className="text-xs font-mono tracking-widest text-wy-text-secondary mt-0.5">VIEWERS</div>
</div>
</div>
);