shadcn/app/public/registry/styles/default/relative-time.json

{
  "name": "relative-time",
  "description": "Relative time display (e.g., '2 hours ago')",
  "dependencies": [
    "date-fns"
  ],
  "files": [
    {
      "name": "relative-time.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport interface RelativeTimeProps\n  extends React.HTMLAttributes<HTMLTimeElement> {\n  date: Date | string\n  format?: \"auto\" | \"short\" | \"long\"\n  updateInterval?: number\n}\n\nconst RelativeTime = React.forwardRef<HTMLTimeElement, RelativeTimeProps>(\n  (\n    { className, date, format = \"auto\", updateInterval = 60000, ...props },\n    ref\n  ) => {\n    const [relativeTime, setRelativeTime] = React.useState(\"\")\n\n    const getRelativeTime = React.useCallback(() => {\n      const now = new Date()\n      const then = new Date(date)\n      const diffInSeconds = Math.floor((now.getTime() - then.getTime()) / 1000)\n\n      if (format === \"short\") {\n        if (diffInSeconds < 60) return `${diffInSeconds}s`\n        if (diffInSeconds < 3600) return `${Math.floor(diffInSeconds / 60)}m`\n        if (diffInSeconds < 86400) return `${Math.floor(diffInSeconds / 3600)}h`\n        if (diffInSeconds < 604800)\n          return `${Math.floor(diffInSeconds / 86400)}d`\n        if (diffInSeconds < 2592000)\n          return `${Math.floor(diffInSeconds / 604800)}w`\n        if (diffInSeconds < 31536000)\n          return `${Math.floor(diffInSeconds / 2592000)}mo`\n        return `${Math.floor(diffInSeconds / 31536000)}y`\n      }\n\n      if (diffInSeconds < 60) return \"just now\"\n      if (diffInSeconds < 120) return \"1 minute ago\"\n      if (diffInSeconds < 3600)\n        return `${Math.floor(diffInSeconds / 60)} minutes ago`\n      if (diffInSeconds < 7200) return \"1 hour ago\"\n      if (diffInSeconds < 86400)\n        return `${Math.floor(diffInSeconds / 3600)} hours ago`\n      if (diffInSeconds < 172800) return \"1 day ago\"\n      if (diffInSeconds < 604800)\n        return `${Math.floor(diffInSeconds / 86400)} days ago`\n      if (diffInSeconds < 1209600) return \"1 week ago\"\n      if (diffInSeconds < 2592000)\n        return `${Math.floor(diffInSeconds / 604800)} weeks ago`\n      if (diffInSeconds < 5184000) return \"1 month ago\"\n      if (diffInSeconds < 31536000)\n        return `${Math.floor(diffInSeconds / 2592000)} months ago`\n      if (diffInSeconds < 63072000) return \"1 year ago\"\n      return `${Math.floor(diffInSeconds / 31536000)} years ago`\n    }, [date, format])\n\n    React.useEffect(() => {\n      setRelativeTime(getRelativeTime())\n\n      const interval = setInterval(() => {\n        setRelativeTime(getRelativeTime())\n      }, updateInterval)\n\n      return () => clearInterval(interval)\n    }, [getRelativeTime, updateInterval])\n\n    return (\n      <time\n        ref={ref}\n        dateTime={new Date(date).toISOString()}\n        className={cn(className)}\n        {...props}\n      >\n        {relativeTime}\n      </time>\n    )\n  }\n)\nRelativeTime.displayName = \"RelativeTime\"\n\nexport { RelativeTime }\n"
    }
  ],
  "type": "components:ui"
}