relative-time

1"use client";
2 
3import { useControllableState } from "@radix-ui/react-use-controllable-state";
4import {
5  createContext,
6  type HTMLAttributes,
7  useContext,
8  useEffect,
9} from "react";
10import { cn } from "@/lib/utils";
11 
12const formatDate = (
13  date: Date,
14  timeZone: string,
15  options?: Intl.DateTimeFormatOptions
16) =>
17  new Intl.DateTimeFormat(
18    "en-US",
19    options ?? {
20      dateStyle: "long",
21      timeZone,
22    }
23  ).format(date);
24 
25const formatTime = (
26  date: Date,
27  timeZone: string,
28  options?: Intl.DateTimeFormatOptions
29) =>
30  new Intl.DateTimeFormat(
31    "en-US",
32    options ?? {
33      hour: "2-digit",
34      minute: "2-digit",
35      second: "2-digit",
36      timeZone,
37    }
38  ).format(date);
39 
40type RelativeTimeContextType = {
41  time: Date;
42  dateFormatOptions?: Intl.DateTimeFormatOptions;
43  timeFormatOptions?: Intl.DateTimeFormatOptions;
44};
45 
46const RelativeTimeContext = createContext<RelativeTimeContextType>({
47  time: new Date(),
48  dateFormatOptions: {
49    dateStyle: "long",
50  },
51  timeFormatOptions: {
52    hour: "2-digit",
53    minute: "2-digit",
54  },
55});
56 
57export type RelativeTimeProps = HTMLAttributes<HTMLDivElement> & {
58  time?: Date;
59  defaultTime?: Date;
60  onTimeChange?: (time: Date) => void;
61  dateFormatOptions?: Intl.DateTimeFormatOptions;
62  timeFormatOptions?: Intl.DateTimeFormatOptions;
63};
64 
65export const RelativeTime = ({
66  time: controlledTime,
67  defaultTime = new Date(),
68  onTimeChange,
69  dateFormatOptions,
70  timeFormatOptions,
71  className,
72  ...props
73}: RelativeTimeProps) => {
74  const [time, setTime] = useControllableState<Date>({
75    defaultProp: defaultTime,
76    prop: controlledTime,
77    onChange: onTimeChange,
78  });
79 
80  useEffect(() => {
81    if (controlledTime) {
82      return;
83    }
84 
85    const interval = setInterval(() => {
86      setTime(new Date());
87    }, 1000);
88 
89    return () => clearInterval(interval);
90  }, [setTime, controlledTime]);
91 
92  return (
93    <RelativeTimeContext.Provider
94      value={{
95        time: time ?? defaultTime,
96        dateFormatOptions,
97        timeFormatOptions,
98      }}
99    >
100      <div className={cn("grid gap-2", className)} {...props} />
101    </RelativeTimeContext.Provider>
102  );
103};
104 
105export type RelativeTimeZoneProps = HTMLAttributes<HTMLDivElement> & {
106  zone: string;
107  dateFormatOptions?: Intl.DateTimeFormatOptions;
108  timeFormatOptions?: Intl.DateTimeFormatOptions;
109};
110 
111export type RelativeTimeZoneContextType = {
112  zone: string;
113};
114 
115const RelativeTimeZoneContext = createContext<RelativeTimeZoneContextType>({
116// … truncated