ChronologicalList

El componente ChronologicalList es un componente que muestra una lista de eventon ordenados por fecha.

Ejemplo

Importacion

Para importar el componente ChronologicalList, se puede hacer desde fenextjs o fenextjs-component

import {
  ChronologicalList,
  ChronologicalListProps,
} from "fenextjs/cjs/component/ChronologicalList";

import {
  ChronologicalList,
  ChronologicalListProps,
} from "fenextjs-component/cjs/ChronologicalList";

Parametros

Propiedad	Tipo	Requerido	Descripción
items	ChronologicalListItemsProps[]	sí	Lista de elementos para la lista cronológica.
market	ReactNode	no	Icon personalizado para todos los elementos.
parseDateYYYYMMDD	(date: Date) => string	no	Función para personalizar día, mes y año de la fecha.
parseDateHHMMSS	(date: Date) => string	no	Función para personalizar horas, minutos y segundos de la fecha.

ChronologicalListItemsProps

Propiedad	Tipo	Requerido	Default	Descripción
date	Date	sí		Fecha asociada al elemento.
children	ReactNode	sí		Contenido del elemento.
market	ReactNode	no		Icon personalizado para este elemento.
className	string	no	""	Clase personalizada del componente.

Storybook

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

Usos

Uso básico del componente ChronologicalList

<ChronologicalList
  items={[{ date: new Date(), children: "Contenido del elemento" }]}
  parseDateYYYYMMDD={(date) => date.toISOString()}
  parseDateHHMMSS={(date) => date.toLocaleTimeString()}
/>

Button Chronometer