Relative Time

1"use client"
2 
3import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
4import { useRelativeTime } from "../../hooks/use-relative-time";
5 
6type RelativeTimeProps = {
7  date: Date
8  locale?: string
9  size?: "long" | "short" | "narrow"
10} & React.ComponentPropsWithoutRef<typeof TooltipTrigger>;
11 
12export function RelativeTime({ date, locale = "en-US", size = "short", ...props }: RelativeTimeProps) {
13  const time = useRelativeTime({ date, locale, size })
14  const localeString = date.toLocaleString(locale, { dateStyle: "long", timeStyle: "long" })
15 
16  return (
17    <Tooltip>
18      <TooltipTrigger {...props}>
19        {time}
20      </TooltipTrigger>
21      <TooltipContent>
22        {localeString}
23      </TooltipContent>
24    </Tooltip>
25  )
26}