Relative Time

Component 7

About

Here is Relative Time component

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Relative Time to your project and fits it to your theme.

Code

How Relative Time is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

'use client';

import {
  RelativeTime,
  RelativeTimeZone,
  RelativeTimeZoneDate,
  RelativeTimeZoneDisplay,
  RelativeTimeZoneLabel,
} from '@/components/ui/relative-time';
import { useEffect, useState } from 'react';

const timezones = [
  { label: 'EST', zone: 'America/New_York' },
  { label: 'GMT', zone: 'Europe/London' },
  { label: 'JST', zone: 'Asia/Tokyo' },
];

const Example = () => {
  const [time, setTime] = useState(new Date());

  useEffect(() => {
    const interval = setInterval(() => {
      setTime(new Date());
    }, 1000);
    return () => clearInterval(interval);
  }, []);

  return (
    <div className="rounded-md border bg-background p-4">
      <RelativeTime onTimeChange={setTime} time={time}>
        {timezones.map(({ zone, label }) => (
          <RelativeTimeZone key={zone} zone={zone}>
            <RelativeTimeZoneLabel>{label}</RelativeTimeZoneLabel>
            <RelativeTimeZoneDate />
            <RelativeTimeZoneDisplay />
          </RelativeTimeZone>
        ))}
      </RelativeTime>
    </div>
  );
};

export default Example;