ActivityFeed

Cuándo usarlo

Props. items [{author, avatar, time, text (admite <strong> para destacar el objeto), content (adjunto, etiquetas…), unread, online}], connector (línea vertical entre avatares en lugar de separadores), size (md · sm).

Visual. Avatar 40px, autor text-sm-semibold en text-secondary, hora text-xs en text-tertiary, texto en text-tertiary. Sin leer: punto fg-success-secondary.

Uso. Historial de cambios de un elemento (con connector) o centro de notificaciones (con separadores).

Detalles. Funciona sin JavaScript. Es una lista ordenada (<ol>). El punto de "sin leer" lleva ese texto para lectores de pantalla.

Ejemplos

Props

Código

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

export default function Page() {
	return (
		<>
			<ActivityFeed
				connector
				items={[
					{
						author: "Ana Martín",
						avatar: { initials: "AM" },
						time: "Hace 2 h",
						text: <>Ha pagado <strong>Alquiler</strong></>,
					},
				]}
			/>
		</>
	);
}

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

<ActivityFeed
	connector
	items={[
		{
			author: "Ana Martín",
			avatar: { initials: "AM" },
			time: "Hace 2 h",
			text: <>Ha pagado <strong>Alquiler</strong></>,
		},
	]}
/>