{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "relative-time",
  "title": "Relative Time",
  "description": "A component that displays current relative time to the given input",
  "registryDependencies": [
    "tooltip"
  ],
  "files": [
    {
      "path": "registry/components/ui/relative-time.tsx",
      "content": "\"use client\"\n\nimport { Tooltip, TooltipContent, TooltipTrigger } from \"@/components/ui/tooltip\";\nimport { useRelativeTime } from \"../../hooks/use-relative-time\";\n\ntype RelativeTimeProps = {\n  date: Date\n  locale?: string\n  size?: \"long\" | \"short\" | \"narrow\"\n} & React.ComponentPropsWithoutRef<typeof TooltipTrigger>;\n\nexport function RelativeTime({ date, locale = \"en-US\", size = \"short\", ...props }: RelativeTimeProps) {\n  const time = useRelativeTime({ date, locale, size })\n  const localeString = date.toLocaleString(locale, { dateStyle: \"long\", timeStyle: \"long\" })\n\n  return (\n    <Tooltip>\n      <TooltipTrigger {...props}>\n        {time}\n      </TooltipTrigger>\n      <TooltipContent>\n        {localeString}\n      </TooltipContent>\n    </Tooltip>\n  )\n}",
      "type": "registry:ui",
      "target": "components/ui/relative-time.tsx"
    },
    {
      "path": "registry/hooks/use-relative-time.ts",
      "content": "\"use client\"\n\nimport { useEffect, useState } from \"react\"\n\ntype UseRelativeTimeProps = {\n  date: Date\n  locale?: string\n  size?: \"long\" | \"short\" | \"narrow\"\n}\n\nexport function useRelativeTime({ date, locale = \"en-US\", size = \"short\" }: UseRelativeTimeProps) {\n  const [now, setNow] = useState<number | null>(null)\n  const format = (diff: number, unit: Intl.RelativeTimeFormatUnit) => new Intl.RelativeTimeFormat(locale, { style: size }).format(diff, unit)\n\n  useEffect(() => {\n    setNow(Date.now())\n  }, [])\n\n  if (!now) return date.toISOString()\n\n  const diffInSeconds = Math.floor((date.getTime() - now) / 1000);\n  if (diffInSeconds < 60 && diffInSeconds > -60) {\n    return format(diffInSeconds, \"second\");\n  }\n\n  const diffInMinutes = Math.floor(diffInSeconds / 60);\n  if (diffInMinutes < 60 && diffInMinutes > -60) {\n    return format(diffInMinutes, \"minute\");\n  }\n\n  const diffInHours = Math.floor(diffInMinutes / 60);\n  if (diffInHours < 24 && diffInHours > -24) {\n    return format(diffInHours, \"hour\");\n  }\n\n  const diffInDays = Math.floor(diffInHours / 24);\n  if (diffInDays < 7 && diffInDays > -7) {\n    return format(diffInDays, \"day\");\n  }\n\n  const diffInWeeks = Math.floor(diffInDays / 7);\n  if (diffInWeeks < 4 && diffInWeeks > -4) {\n    return format(diffInWeeks, \"week\");\n  }\n\n  const diffInMonths = Math.floor(diffInDays / 30);\n  if (diffInMonths < 12 && diffInMonths > -12) {\n    return format(diffInMonths, \"month\");\n  }\n\n  const diffInYears = Math.floor(diffInDays / 365);\n  return format(diffInYears, \"year\");\n}",
      "type": "registry:hook",
      "target": "hooks/use-relative-time.ts"
    }
  ],
  "type": "registry:ui"
}