Status Timestamp

1"use client";
2 
3import { UTCDate } from "@date-fns/utc";
4import {
5  HoverCard,
6  HoverCardContent,
7  HoverCardTrigger,
8} from "@/components/ui/hover-card";
9import {
10  Tooltip,
11  TooltipContent,
12  TooltipProvider,
13  TooltipTrigger,
14} from "@/components/ui/tooltip";
15import { useCopyToClipboard } from "@/hooks/use-copy-to-clipboard";
16import { useMediaQuery } from "@/hooks/use-media-query";
17import { cn } from "@/lib/utils";
18import type { HoverCardContentProps } from "@radix-ui/react-hover-card";
19import { format, formatDistanceToNowStrict } from "date-fns";
20import { Check, Copy } from "lucide-react";
21import { useEffect, useState } from "react";
22 
23type BaseProps = {
24  date: Date;
25  variant?: "simple" | "rich";
26  className?: string;
27};
28 
29type SimpleVariantProps = BaseProps &
30  React.ComponentProps<typeof TooltipTrigger> & {
31    variant?: "simple";
32  };
33 
34type RichVariantProps = BaseProps &
35  React.ComponentProps<typeof HoverCardTrigger> & {
36    variant: "rich";
37    side?: HoverCardContentProps["side"];
38    align?: HoverCardContentProps["align"];
39    alignOffset?: HoverCardContentProps["alignOffset"];
40    sideOffset?: HoverCardContentProps["sideOffset"];
41  };
42 
43type StatusTimestampProps = SimpleVariantProps | RichVariantProps;
44 
45/**
46 * StatusTimestamp - Polymorphic timestamp display component with timezone support
47 *
48 * A flexible timestamp component that can display dates in two variants:
49 * - **simple**: Shows a tooltip on hover with the formatted date (default)
50 * - **rich**: Shows a hover card with local timezone, UTC, and relative time, plus copy-to-clipboard
51 *
52 * The component automatically detects the user's timezone using `Intl.DateTimeFormat()`
53 * and displays the date in both the local timezone and UTC. The rich variant includes
54 * a live-updating relative time display ("2 minutes ago") that refreshes every second
55 * while the hover card is open.
56 *
57 * Touch device support is built-in for the rich variant, toggling the hover card on tap
58 * instead of requiring hover.
59 *
60 * @param date - The date to display
61 * @param variant - Display style: "simple" for tooltip, "rich" for hover card with details
62 * @param side - (rich variant only) Placement of the hover card: "top" | "right" | "bottom" | "left"
63 * @param align - (rich variant only) Alignment of the hover card: "start" | "center" | "end"
64 * @param alignOffset - (rich variant only) Pixel offset for alignment (default: -4)
65 * @param sideOffset - (rich variant only) Pixel offset from the trigger
66 *
67 * @example
68// … truncated