Time Ago Card

The TimeAgoCard component displays a timestamp in a human-readable format, such as “5 minutes ago”. It also provides an option to view the full date and time when clicked.

Usage

import { TimeAgoCard } from "@/components";

//...

return (
  <TimeAgoCard timestamp={new Date().toISOString()} />
);

Invalid Date Handling

If an invalid date is passed to the timestamp prop (e.g., an invalid date string or NaN), the component will not render anything. A warning message will be displayed in browser console instead. Ensure that the timestamp value is a valid ISO 8601 date string, Unix timestamp number, or null.

Timestamp variants

Time difference examples

The component displays relative time in a narrow format for all time ranges:

Future timestamps

The component also handles future timestamps:

With prefix

API Reference

Prop	Required	Default	Type
timestamp	false		'string' | 'number' | 'null'
prefix	false		'string'
textProps	false		'TextProps'
tooltipProps	false		'TooltipProps'
triggerClassName	false		'string'
triggerProps	false		'ButtonHTMLAttributes<HTMLButtonElement>'