ChronologicalList

El componente ChronologicalList organiza elementos de forma cronológica, agrupándolos por fecha y hora. Permite personalizar el formato de la fecha y la hora, así como agregar contenido adicional para cada elemento.

Ejemplo

Importación

Para importar el componente ChronologicalList, se puede hacer desde fenextjs

import { ChronologicalList } from "fenextjs";

Parámetros

Parámetro	Tipo	Requerido	Default	Descripcion
items	ChronologicalListItemsProps[]	sí	undefined	Lista de elementos que se mostrarán en la lista cronológica, cada uno con su respectiva fecha, contenido y posible personalización.
market	ReactNode	no	undefined	Contenido personalizado que se mostrará junto a cada elemento como marcador. Puede ser un ícono, texto o cualquier otro nodo.
parseDateYYYYMMDD	(date: Date) => string	no	parseDateYYYYMMDD	Función para parsear la fecha en el formato 'YYYY-MM-DD'.
parseDateHHMMSS	(date: Date) => string	no	getTimeToText	Función para parsear la hora en el formato 'HH:MM:SS'.
className	string	no	''	Clase CSS personalizada para el componente.

ChronologicalListItemsProps

Cada elemento de la lista tiene sus propios parámetros:

Propiedad	Tipo	Requerido	Descripción
date	Date	si	La fecha correspondiente al elemento.
children	ReactNode	si	El contenido que se mostrará dentro del elemento.
market	ReactNode	no	Contenido personalizado que se mostrará junto a cada elemento como marcador. Puede ser un ícono, texto o cualquier otro nodo.
className	string	no	Clase CSS personalizada para el elemento.

Formato de Fecha y Hora

El componente permite personalizar el formato de la fecha y hora utilizando las funciones parseDateYYYYMMDD y parseDateHHMMSS. Si no se proporcionan, se utilizan las funciones por defecto.

Storybook

Para ver el storybook del componente lo puede hacer con este link (opens in a new tab)

Usos

Lista cronológica básica

<ChronologicalList
  items={[
    { date: new Date(), children: "Elemento 1" },
    { date: new Date(), children: "Elemento 2" },
  ]}
/>

Lista cronológica con marcador personalizado

<ChronologicalList
  items={[
    { date: new Date(), children: "Elemento 1", market: <span>🌟</span> },
    { date: new Date(), children: "Elemento 2" },
  ]}
  market={<span>🔔</span>}
/>

Lista cronológica con formato de fecha personalizado

<ChronologicalList
  items={[{ date: new Date(), children: "Evento importante" }]}
  parseDateYYYYMMDD={(date) =>
    date.toLocaleDateString("es-ES", {
      year: "numeric",
      month: "long",
      day: "numeric",
    })
  }
/>

Button Chronometer