50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T1dc1,"use client" import * as React from "react" import { formatDate, toPersianDigits, type CalendarType, } from "@/lib/persian-date" export type TimeAgoFormatter = (value: T, isPast: boolean) => string export type TimeAgoUnitName = "second" | "minute" | "hour" | "day" | "week" | "month" | "year" export interface TimeAgoMessages { justNow: string past: string | TimeAgoFormatter future: string | TimeAgoFormatter invalid: string second: string | TimeAgoFormatter minute: string | TimeAgoFormatter hour: string | TimeAgoFormatter day: string | TimeAgoFormatter week: string | TimeAgoFormatter month: string | TimeAgoFormatter year: string | TimeAgoFormatter } export interface TimeAgoUnit { max: number value: number name: TimeAgoUnitName } export interface FormatTimeAgoOptions { /** Beyond this many milliseconds (or this unit's `max`), fall back to a full date. @default undefined */ max?: TimeAgoUnitName | number /** Formatter used for the full-date fallback. @default uses formatDate with "yyyy/MM/dd" */ fullDateFormatter?: (date: Date) => string /** @default faMessages (or enMessages, see the `locale` option) */ messages?: TimeAgoMessages /** @default "fa" */ locale?: "fa" | "en" /** Calendar used by the default fullDateFormatter. @default "shamsi" */ calendarType?: CalendarType /** Show seconds instead of collapsing sub-minute diffs into "just now". @default false */ showSecond?: boolean /** @default "round" */ rounding?: "round" | "ceil" | "floor" | number /** Override the unit table (thresholds in milliseconds). */ units?: TimeAgoUnit[] } export interface UseTimeAgoOptions extends FormatTimeAgoOptions { /** Re-render interval in milliseconds. Set 0 to compute once and never update. @default 30000 */ updateInterval?: number } const DEFAULT_UNITS: TimeAgoUnit[] = [ { max: 60000, value: 1000, name: "second" }, { max: 2760000, value: 60000, name: "minute" }, { max: 72000000, value: 3600000, name: "hour" }, { max: 518400000, value: 86400000, name: "day" }, { max: 2419200000, value: 604800000, name: "week" }, { max: 28512000000, value: 2592000000, name: "month" }, { max: Number.POSITIVE_INFINITY, value: 31536000000, name: "year" }, ] export const faMessages: TimeAgoMessages = { justNow: "همین الان", past: (n) => (/[\d۰-۹]/.test(n) ? `${n} پیش` : n), future: (n) => (/[\d۰-۹]/.test(n) ? `${n} دیگر` : n), invalid: "", second: (n) => `${toPersianDigits(String(n))} ثانیه`, minute: (n) => `${toPersianDigits(String(n))} دقیقه`, hour: (n) => `${toPersianDigits(String(n))} ساعت`, day: (n, past) => n === 1 ? (past ? "دیروز" : "فردا") : `${toPersianDigits(String(n))} روز`, week: (n, past) => n === 1 ? past ? "هفته پیش" : "هفته دیگر" : `${toPersianDigits(String(n))} هفته`, month: (n, past) => n === 1 ? past ? "ماه پیش" : "ماه دیگر" : `${toPersianDigits(String(n))} ماه`, year: (n, past) => n === 1 ? past ? "سال پیش" : "سال دیگر" : `${toPersianDigits(String(n))} سال`, } export const enMessages: TimeAgoMessages = { justNow: "just now", past: (n) => (/\d/.test(n) ? `${n} ago` : n), future: (n) => (/\d/.test(n) ? `in ${n}` : n), invalid: "", second: (n) => `${n} second${n > 1 ? "s" : ""}`, minute: (n) => `${n} minute${n > 1 ? "s" : ""}`, hour: (n) => `${n} hour${n > 1 ? "s" : ""}`, day: (n, past) => n === 1 ? (past ? "yesterday" : "tomorrow") : `${n} day${n > 1 ? "s" : ""}`, week: (n, past) => n === 1 ? past ? "last week" : "next week" : `${n} week${n > 1 ? "s" : ""}`, month: (n, past) => n === 1 ? past ? "last month" : "next month" : `${n} month${n > 1 ? "s" : ""}`, year: (n, past) => n === 1 ? past ? "last year" : "next year" : `${n} year${n > 1 ? "s" : ""}`, } function defaultFullDateFormatter(calendarType: CalendarType) { return (date: Date) => formatDate(date, "yyyy/MM/dd", { calendarType }) } function applyFormat( messages: TimeAgoMessages, name: TimeAgoUnitName | "past" | "future", value: number | string, isPast: boolean ): string { const formatter = messages[name] if (typeof formatter === "function") { return (formatter as TimeAgoFormatter)(value as never, isPast) } return formatter.replace("{0}", String(value)) } /** * Formats the difference between `from` and `now` as a relative time string, * e.g. "۲ روز پیش" (2 days ago) or "2 days ago". Pure function -- the reactive * counterpart is `useTimeAgo` below. */ export function formatTimeAgo( from: Date, options: FormatTimeAgoOptions = {}, now: Date | number = Date.now() ): string { const { max, messages = options.locale === "en" ? enMessages : faMessages, fullDateFormatter = defaultFullDateFormatter( options.calendarType ?? "shamsi" ), units = DEFAULT_UNITS, showSecond = false, rounding = "round", } = options const roundFn = typeof rounding === "number" ? (n: number) => Number(n.toFixed(rounding)) : Math[rounding] const diff = Number(now) - from.getTime() const absDiff = Math.abs(diff) function getValue(unit: TimeAgoUnit) { return roundFn(absDiff / unit.value) } function format(unit: TimeAgoUnit) { const value = getValue(unit) const isPast = diff > 0 const str = applyFormat(messages, unit.name, value, isPast) return applyFormat(messages, isPast ? "past" : "future", str, isPast) } if (absDiff < 60000 && !showSecond) { return messages.justNow } if (typeof max === "number" && absDiff > max) { return fullDateFormatter(from) } if (typeof max === "string") { const unitMax = units.find((unit) => unit.name === max)?.max if (unitMax && absDiff > unitMax) { return fullDateFormatter(from) } } for (const [index, unit] of units.entries()) { const value = getValue(unit) const previous = units[index - 1] if (value <= 0 && previous) return format(previous) if (absDiff < unit.max) return format(unit) } return messages.invalid } /** * Reactive relative-time formatter ("۲ روز پیش" / "2 days ago"). Re-renders on * `updateInterval` (30s by default) so the string stays current without a * manual refresh. * * Returns `null` until the hook has run in the browser -- `formatTimeAgo` * reads `Date.now()` internally, which differs between server and client, so * rendering it during SSR would produce a hydration mismatch. Same * convention as `useCountdown`/`useDate`. */ export function useTimeAgo( time: Date | number | string, options: UseTimeAgoOptions = {} ): string | null { const { updateInterval = 30000, ...formatOptions } = options const [mounted, setMounted] = React.useState(false) const [, forceRender] = React.useReducer((tick: number) => tick + 1, 0) React.useEffect(() => { const mount = () => setMounted(true) mount() if (updateInterval <= 0) return const id = setInterval(forceRender, updateInterval) return () => clearInterval(id) }, [updateInterval]) if (!mounted) return null // Recomputed on every render, including the interval-driven ones above -- // "now" must be read fresh each time, so this can't be memoized on `time`/options alone. return formatTimeAgo(new Date(time), formatOptions) } 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L50",null,{"namespace":"@persianlabsui","registryDependencies":["@persianlabsui/persian-date"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/base/hooks/use-time-ago.ts","content":"$52","type":"registry:hook"}],"className":"h-[70svh] min-h-80"}]]}]