Components
Loading preview...
Here is Relative Time component
@haydenbleasel
npx shadcn@latest add https://21st.dev/r/haydenbleasel/relative-time'use client';
import {
RelativeTime,
RelativeTimeZone,
RelativeTimeZoneDate,
RelativeTimeZoneDisplay,
RelativeTimeZoneLabel,
} from '@/components/ui/relative-time';
const timezones = [
{ label: 'EST', zone: 'America/New_York' },
{ label: 'GMT', zone: 'Europe/London' },
{ label: 'JST', zone: 'Asia/Tokyo' },
];
const Example = () => (
<div className="rounded-md border bg-background p-4">
<RelativeTime dateFormatOptions={{ dateStyle: 'full' }}>
{timezones.map(({ zone, label }) => (
<RelativeTimeZone key={zone} zone={zone}>
<RelativeTimeZoneLabel>{label}</RelativeTimeZoneLabel>
<RelativeTimeZoneDate />
<RelativeTimeZoneDisplay />
</RelativeTimeZone>
))}
</RelativeTime>
</div>
);
export default Example;