ChannelPanel

Panel de 320px para la página del canal de Twitch, con título, texto, filas de datos y una acción opcional.

Cuándo usarlo

Props. title, icon (nombre de Icon), children (párrafos), rows ({ label, value }, para horario, normas cortas o enlaces), action ({ label, href, icon?, hierarchy?, onClick? }), width.

Cuándo usarlo. En "Sobre el canal", horario, normas y enlaces. Twitch pide 320px de ancho: exporta cada panel como imagen PNG a 640px de ancho (2x) para que se vea nítido en pantallas densas. El título va en Bricolage Grotesque semibold (24/32); el resto, en Geist. La acción es un Button secundario a todo el ancho.

Evita. Más de una acción por panel. Párrafos de más de cuatro líneas: nadie lee un panel largo, y menos con el directo de fondo.

Ampliaciones sobre la guía. action.onClick, para una acción sin href (en la guía ese botón no hacía nada).

Accesibilidad. Es una sección con nombre (el título, en <h3>); las filas son una lista de definiciones (<dl>) con la cifra tabular a la derecha.

Ejemplos

Sobre el canal

Directos tranquilos, juegos a medias y conversación sin guion.

Si es tu primera vez, siéntate. Hay sitio.

Ver todos los enlaces

Horario

Lunes: 20:00
Miércoles: 20:00
Viernes: 22:00

Normas

Respeto, sin spoilers y sin pedir que haga lo mismo que el streamer de ayer.

Los moderadores tienen la última palabra y mucha paciencia.

Props

Prop	Tipo	Por defecto	Descripción
`title`obligatoria	`ReactNode`	—	En Bricolage Grotesque 24/32 semibold.
`icon`	`IconName`	—
`children`	`ReactNode`	—	Párrafos; no más de cuatro líneas cada uno.
`rows`	`ChannelPanelRow[]`	—	Filas de datos: horario, normas cortas o enlaces.
`action`	`ChannelPanelAction`	—	Una sola acción, a todo el ancho.
`width`	`string \| number`	`320`	Twitch pide 320px de ancho (exporta a 640px, 2x).
`className`	`string`	—

Código

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

export default function Page() {
	return (
		<>
			<ChannelPanel
				title="Horario"
				icon="calendar"
				rows={[
					{ label: "Lunes", value: "20:00" },
					{ label: "Viernes", value: "22:00" },
				]}
				action={{ label: "Ver todos los enlaces", href: "/enlaces", icon: "arrow-right" }}
			/>
		</>
	);
}

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

<ChannelPanel
	title="Horario"
	icon="calendar"
	rows={[
		{ label: "Lunes", value: "20:00" },
		{ label: "Viernes", value: "22:00" },
	]}
	action={{ label: "Ver todos los enlaces", href: "/enlaces", icon: "arrow-right" }}
/>

Con action.onClick necesita una función: envuélvelo en un .tsx y úsalo como isla client:load. Con action.href, no.