relative-time-card

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