تنسيق الأوقات النسبية

المشكلة

يعرض التطبيق طابعاً زمنياً مثل 'تم النشر منذ يومين.' بينما يكون هذا واضحاً في اللغة الإنجليزية، فإن المنطق والقواعد النحوية لـ 'منذ يومين' مقابل 'خلال يومين' (الماضي مقابل المستقبل) تختلف بشكل كبير عبر اللغات. إن دمج السلاسل النصية البسيط (مثل '2' + ' ' + 'منذ أيام') يفشل في إنتاج مخرجات صحيحة نحوياً.

الحل

استخدم مكوناً مخصصاً مثل FormattedRelativeTime من react-intl. يأخذ هذا المكون قيمة رقمية (مثل -2) ووحدة (مثل 'day')، ويقوم تلقائياً بتنسيقها إلى سلسلة نصية صحيحة نحوياً ومتوافقة مع اللغة المحلية مثل '2 days ago' أو 'hace 2 días' أو 'gestern' (أمس).

الخطوات

1. إنشاء مكون عميل للوقت النسبي

يجب استخدام مكون FormattedRelativeTime داخل مكون عميل.

أنشئ ملفاً جديداً app/components/RelativeTime.tsx.

// app/components/RelativeTime.tsx
'use client';

import { FormattedRelativeTime } from 'react-intl';

type Props = {
  value: number;
  unit: Intl.RelativeTimeFormatUnit;
};

export default function RelativeTime({ value, unit }: Props) {
  return (
    <FormattedRelativeTime
      value={value}
      unit={unit}
      numeric="auto" // "auto" allows "yesterday" or "tomorrow"
      style="long"
    />
  );
}

2. تمرير خيارات التنسيق

يقبل مكون FormattedRelativeTime عدة خصائص رئيسية:

• value: عدد الوحدات. تشير القيمة السالبة (مثل -2) إلى الماضي ("منذ يومين")، بينما تشير القيمة الموجبة (2) إلى المستقبل ("خلال يومين").
• unit: وحدة الوقت، مثل 'day' أو 'hour' أو 'minute' أو 'second'.
• numeric="auto": يسمح هذا للمكتبة باستخدام كلمات مثل "أمس" أو "غداً" بدلاً من "منذ يوم واحد" أو "خلال يوم واحد".

3. استخدام المكون في الصفحة

يمكنك الآن استخدام هذا المكون في أي صفحة. أنت مسؤول عن حساب فرق الوقت قبل تمرير الخصائص.

// app/[lang]/page.tsx
import RelativeTime from '@/app/components/RelativeTime';

export default function Home() {
  // You would calculate these values dynamically
  const daysSinceUpdate = -2;
  const hoursUntilEvent = 3;

  return (
    <div>
      <h1>Updates</h1>
      <p>
        File updated: <RelativeTime value={daysSinceUpdate} unit="day" />
      </p>
      <p>
        Event starts: <RelativeTime value={hoursUntilEvent} unit="hour" />
      </p>
    </div>
  );
}

المستخدم الذي يزور /en سيرى "File updated: 2 days ago" و"Event starts: in 3 hours". المستخدم الذي يزور /es سيرى "File updated: hace 2 días" و"Event starts: dentro de 3 horas".