TimestampInfo

Overview

The TimestampInfo component displays timestamps in human-readable formats with comprehensive tooltip information. It's designed to enhance user experience by presenting date and time data in an intuitive way while maintaining precision and providing access to multiple time formats.

Usage

import { TimestampInfo } from "@unkey/ui";
 
export default function MyComponent() {
  return (
    <TimestampInfo
      value={1704063045}
      displayType="local"
      className="custom-timestamp"
    />
  );
}

Examples

Local Display Type

Shows time in the user's local timezone for better readability.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

{/* Current Time */}
<div className="flex flex-col gap-2 text-center">
  <h3 className="text-sm font-medium">Current Time</h3>
  <TimestampInfo value={now} displayType="local" />
</div>
{/* One Hour Ago */}
<div className="flex flex-col gap-2 text-center">
  <h3 className="text-sm font-medium">One Hour Ago</h3>
  <TimestampInfo value={oneHourAgo} displayType="local" />
</div>
{/* One Day Ago */}
<div className="flex flex-col gap-2 text-center">
  <h3 className="text-sm font-medium">One Day Ago</h3>
  <TimestampInfo value={oneDayAgo} displayType="local" />
</div>
{/* One Week Ago */}
<div className="flex flex-col gap-2 text-center">
  <h3 className="text-sm font-medium">One Week Ago</h3>
  <TimestampInfo value={oneWeekAgo} displayType="local" />
</div>

UTC Display Type

Displays time in UTC format for consistency across timezones.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

{/* Current Time */}
<div className="flex flex-col gap-2 text-center">
  <h3 className="text-sm font-medium">Current Time</h3>
  <TimestampInfo value={now} displayType="utc" />
</div>
{/* One Hour Ago */}
<div className="flex flex-col gap-2 text-center">
  <h3 className="text-sm font-medium">One Hour Ago</h3>
  <TimestampInfo value={oneHourAgo} displayType="utc" />
</div>
{/* One Day Ago */}
<div className="flex flex-col gap-2 text-center">
  <h3 className="text-sm font-medium">One Day Ago</h3>
  <TimestampInfo value={oneDayAgo} displayType="utc" />
</div>
{/* One Week Ago */}
<div className="flex flex-col gap-2 text-center">
  <h3 className="text-sm font-medium">One Week Ago</h3>
  <TimestampInfo value={oneWeekAgo} displayType="utc" />
</div>

Relative Display Type

Presents time in relative format for better context.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

{/* Current Time */}
<div className="flex flex-col gap-2 text-center">
  <h3 className="text-sm font-medium">Current Time</h3>
  <TimestampInfo value={now} displayType="relative" />
</div>
{/* One Hour Ago */}
<div className="flex flex-col gap-2 text-center">
  <h3 className="text-sm font-medium">One Hour Ago</h3>
  <TimestampInfo value={oneHourAgo} displayType="relative" />
</div>
{/* One Day Ago */}
<div className="flex flex-col gap-2 text-center">
  <h3 className="text-sm font-medium">One Day Ago</h3>
  <TimestampInfo value={oneDayAgo} displayType="relative" />
</div>
{/* One Week Ago */}
<div className="flex flex-col gap-2 text-center">
  <h3 className="text-sm font-medium">One Week Ago</h3>
  <TimestampInfo value={oneWeekAgo} displayType="relative" />
</div>

Features

• Human-Readable Display: Converts timestamps to user-friendly formats
• Comprehensive Tooltip: Shows UTC, local time, relative time, and raw timestamp
• Automatic Timezone Handling: Seamlessly manages timezone conversions
• Multiple Display Formats: Supports local, UTC, and relative time display
• Copy to Clipboard: One-click copying of timestamp values
• Responsive Design: Adapts to different screen sizes and viewports
• Accessibility: Built-in accessibility support with proper ARIA attributes
• Customizable: Extensive styling options through className props

Props

Structure

The TimestampInfo is composed of several elements that work together:

1. TimestampInfo - The main container component
2. Display Element - The visible timestamp text
3. Tooltip Trigger - Activates the tooltip on hover/focus
4. Tooltip Content - Comprehensive timestamp information
5. Copy Functionality - Interactive elements for copying values

Styling

The component includes default styling with:

• Consistent typography and spacing
• Dark mode support
• Responsive design
• Customizable through className props
• Focus states for accessibility
• Hover effects for interactive elements

Custom Styling

You can customize the appearance using className props:

<TimestampInfo 
  value={1704063045}
  displayType="local"
  className="custom-timestamp-class"
  triggerRef={customRef}
>
  Custom styled timestamp
</TimestampInfo>

Accessibility

The TimestampInfo component is built with accessibility in mind:

• Keyboard Navigation: Full keyboard support for tooltip activation and copy functionality
• Screen Reader Support: Proper ARIA labels and announcements for timestamp information
• Focus Management: Clear focus indicators and logical tab order
• High Contrast: Maintains proper contrast ratios for all text elements
• Semantic HTML: Uses appropriate HTML elements and roles
• Machine Readable: Timestamps are properly formatted for assistive technologies
• Copy Functionality: Accessible copy operations with clear feedback