ChannelBanner

Cuándo usarlo

Props. name, tagline, eyebrow ("Directos en Twitch" por defecto), schedule ({ day, time }), scale, scheduleLabel.

Cuándo usarlo. Como imagen de cabecera del canal. Sin scale se ajusta al ancho disponible; con scale={1} mide 1200×480 y se puede exportar tal cual. Twitch recorta el banner en móvil y tapa parte con el avatar: el contenido deja 120px de margen a cada lado y el horario va en la derecha, dentro de esa zona segura.

Evita. Poner texto pegado a los bordes. Un horario de más de cuatro filas. Para la imagen de canal sin directo (1920×1080) usa StreamScene con variant="offline".

Ampliaciones sobre la guía. scheduleLabel cambia el nombre del horario ("Horario de directos").

Accesibilidad. El nombre del canal es un <h2> y el horario, una lista con nombre.

Ejemplos

Props

Código

import { ChannelBanner } from "@jotis-me/react";

export default function Page() {
	return (
		<>
			<ChannelBanner
				scale={1}
				name="Tu canal"
				tagline="Directos tranquilos y conversación sin guion."
				schedule={[
					{ day: "Lunes", time: "20:00" },
					{ day: "Viernes", time: "22:00" },
				]}
			/>
		</>
	);
}

---
import { ChannelBanner } from "@jotis-me/react";
---

<ChannelBanner
	scale={1}
	name="Tu canal"
	tagline="Directos tranquilos y conversación sin guion."
	schedule={[
		{ day: "Lunes", time: "20:00" },
		{ day: "Viernes", time: "22:00" },
	]}
/>

Con scale no necesita JavaScript. Sin scale mide su contenedor: úsalo con client:load.