نمایش تاریخ و زمان به زبان ساده، مثل «۵ دقیقه پیش»، «دیروز» یا «۲ ساعت دیگر».
این کامپوننت تاریخ و زمان رو به زبان ساده نمایش می‌ده؛ مثلاً به‌جای نمایش تاریخ دقیق، می‌نویسه «۵ دقیقه پیش»، «دیروز» یا «۲ ساعت دیگه».
فرض کن کاربری یک نظر ثبت کرده. می‌خوای زیر نظرش بنویسی «۵ دقیقه پیش» یا «۲ ساعت پیش»، بدون اینکه خودت این متن رو محاسبه کنی.
import { RelativeTime } from "@/components/ui/relative-time"
export function CommentMeta() {
return (
<p>
نوشته شده <RelativeTime date="2026-10-14T09:30:00" />
</p>
)
}
فقط تاریخ ثبت نظر رو به date می‌دی. کامپوننت خودش حساب می‌کنه چقدر از اون زمان گذشته یا چقدر تا اون زمان باقی مونده و متن مناسب رو نمایش می‌ده.
نکته: متن به‌صورت خودکار هر دقیقه به‌روز می‌شه؛ مثلاً ممکنه «۵ دقیقه پیش» بعداً به «۶ دقیقه پیش» تغییر کنه.
اگر نشانگر موس رو روی متن ببری، تاریخ کامل به شمسی نمایش داده می‌شه؛ مثلاً می‌تونی بفهمی «دیروز» دقیقاً چه تاریخی بوده.
اگر فقط متن رو می‌خوای و نیازی به نمایش خودکار یا tooltip نداری، می‌تونی از تابع formatRelativeFa استفاده کنی:
import { formatRelativeFa } from "@/components/ui/relative-time"
// خروجی: «۵ دقیقه پیش»
formatRelativeFa(Date.now() - 5 * 60_000)
// خروجی: «۲ ساعت دیگر»
formatRelativeFa(Date.now() + 2 * 60 * 60_000)
<RelativeTime
date={createdAt}
updateInterval={60_000}
absoluteFormat="d MMMM yyyy"
/>
date: تاریخی که می‌خوای نمایش داده بشه.updateInterval: هر چند وقت یک‌بار متن دوباره محاسبه بشه. مقدار 60_000 یعنی هر دقیقه؛ مقدار 0 یعنی بدون به‌روزرسانی خودکار.absoluteFormat: قالب نمایش تاریخ کامل شمسی، برای تاریخ‌های دور و tooltip.