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()} />
);

Timestamp variants

cutoffDays variants

cutoffDays is the number of days after which the full date will be shown instead of “time ago”. By default, it is set to 8 days.

API Reference

Prop	Required	Default	Type
timestamp	false		'string' | 'number' | 'null'
cutoffDays	false	8	'number'
dateTimeFormatOptions	false		'Intl.DateTimeFormatOptions'
textProps	false		'TextProps'
triggerClassName	false		'string'
contentClassName	false		'string'