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

المشكلة

يعرض التطبيق طابع زمني مثل 'نُشر منذ يومين'. بينما هذا واضح في اللغة الإنجليزية، فإن المنطق والقواعد النحوية لـ 'منذ يومين' مقابل 'خلال يومين' (الماضي مقابل المستقبل) تختلف بشكل كبير عبر اللغات. الدمج البسيط للسلاسل النصية (مثل '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".