ChatPreview

ChatPreview forma parte del apartado «Patterns» del kit. Composiciones listas para usar: KPIs, perfiles, precios, eventos, posts y más.

Instalación#

bash

pnpm add @tsukira/ui

tsx

import { ChatPreview } from "@tsukira/ui"; export function Ejemplo() {  return <ChatPreview />;}

Los ejemplos detallados de ChatPreview están en camino. Mientras tanto, su demo interactiva vive en la página del grupo.

ChatPreviewItemPropsextends HTMLAttributes<HTMLButtonElement>

Prop	Tipo	Default	Descripción
`name`*	`ReactNode`	—	Nombre de la persona/grupo.
`message`*	`ReactNode`	—	Último mensaje (texto).
`time`	`ReactNode`	—	Hora del último mensaje (ej. "12:34").
`avatar`	`Partial<AvatarProps>`	—	Props extra del avatar (src, name, tone, status...).
`unread`	`number`	—	Número de sin leer.
`active`	`boolean`	—	Marcado como activo (seleccionado en una lista).
`fromYou`	`boolean`	—	Indica si el último mensaje es propio (prefija "Tú: ").
`typing`	`boolean`	—	Indica que el otro está escribiendo.

ChatPreviewListPropsextends HTMLAttributes<HTMLDivElement>

Prop	Tipo	Default	Descripción
`variant`	`'card' \| 'flush'`	—	Variante: card o flush dentro de un panel.