relative-time-card

1"use client";
2 
3import { cva, type VariantProps } from "class-variance-authority";
4import { Slot as SlotPrimitive } from "radix-ui";
5import * as React from "react";
6import { cn } from "@/lib/utils";
7import {
8  HoverCard,
9  HoverCardContent,
10  HoverCardTrigger,
11} from "@/registry/bases/radix/ui/hover-card";
12 
13function pluralize(n: number, word: string) {
14  return `${n} ${word}${n === 1 ? "" : "s"}`;
15}
16 
17function formatRelativeTime(date: Date): string {
18  const now = new Date();
19  const diff = now.getTime() - date.getTime();
20  const isInFuture = diff < 0;
21  const absDiff = Math.abs(diff);
22 
23  const seconds = Math.floor(absDiff / 1000);
24  const minutes = Math.floor(seconds / 60);
25  const hours = Math.floor(minutes / 60);
26  const days = Math.floor(hours / 24);
27 
28  if (seconds < 5) return "just now";
29 
30  if (isInFuture) {
31    if (seconds < 60) return `in ${pluralize(seconds, "second")}`;
32    if (minutes < 60) return `in ${pluralize(minutes, "minute")}`;
33    if (hours < 24) return `in ${pluralize(hours, "hour")}`;
34    if (days < 7) return `in ${pluralize(days, "day")}`;
35    return date.toLocaleDateString();
36  }
37 
38  if (seconds < 60) return `${pluralize(seconds, "second")} ago`;
39  if (minutes < 60)
40    return `${pluralize(minutes, "minute")} ${pluralize(seconds % 60, "second")} ago`;
41  if (hours < 24) return `${pluralize(hours, "hour")} ago`;
42  if (days < 7) return `${pluralize(days, "day")} ago`;
43  return date.toLocaleDateString();
44}
45 
46interface TimezoneCardProps extends React.ComponentProps<"div"> {
47  date: Date;
48  timezone?: string;
49}
50 
51function TimezoneCard(props: TimezoneCardProps) {
52  const { date, timezone, ...cardProps } = props;
53 
54  const locale = React.useMemo(
55    () => Intl.DateTimeFormat().resolvedOptions().locale,
56    [],
57  );
58 
59  const timezoneName = React.useMemo(
60    () =>
61      timezone ??
62      new Intl.DateTimeFormat(locale, { timeZoneName: "shortOffset" })
63        .formatToParts(date)
64        .find((part) => part.type === "timeZoneName")?.value,
65    [date, timezone, locale],
66  );
67 
68  const { formattedDate, formattedTime } = React.useMemo(
69    () => ({
70      formattedDate: new Intl.DateTimeFormat(locale, {
71        month: "long",
72        day: "numeric",
73        year: "numeric",
74        timeZone: timezone,
75      }).format(date),
76      formattedTime: new Intl.DateTimeFormat(locale, {
77        hour: "2-digit",
78        minute: "2-digit",
79        second: "2-digit",
80        hour12: true,
81        timeZone: timezone,
82      }).format(date),
83    }),
84// … truncated