عرض أسماء ورموز العملات

عرض معلومات العملة بطريقة مُعرّبة

المشكلة

يحتاج التطبيق إلى الإشارة إلى عملة، مثل 'USD'. إظهار هذا الرمز فقط يعتبر غامضاً. إظهار الاسم الكامل 'دولار أمريكي' أفضل، لكن هذا الاسم نفسه يحتاج إلى ترجمة ('dólar estadounidense'، 'Dollar américain'). علاوة على ذلك، قد يكون الرمز الصحيح ($، US$، CA$) غامضاً بدون سياق.

الحل

استخدم مكون FormattedNumber من react-intl مع خيار currencyDisplay. يتيح لك هذا عرض العملة كرمز (الافتراضي)، أو اسمها الكامل المترجم، أو رمز ISO الخاص بها، مع تنسيقها بشكل صحيح وفقاً للغة الحالية.

الخطوات

1. إنشاء مكون عميل لعرض العملة

يجب استخدام مكون FormattedNumber داخل مكون عميل. قم بإنشاء ملف app/components/LocalizedCurrency.tsx يأخذ خيار currencyDisplay كخاصية لجعله قابلاً لإعادة الاستخدام.

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

import { FormattedNumber } from 'react-intl';

type Props = {
  value: number;
  currency: string;
  displayAs: 'symbol' | 'name' | 'code';
};

export default function LocalizedCurrency({
  value,
  currency,
  displayAs,
}: Props) {
  return (
    <FormattedNumber
      value={value}
      style="currency"
      currency={currency}
      currencyDisplay={displayAs}
    />
  );
}

يقبل هذا المكون الآن خاصية displayAs التي تتحكم مباشرة في خيار currencyDisplay.

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

يمكنك الآن استخدام هذا المكون في صفحة لعرض تنسيقات العملة المختلفة عن طريق تغيير خاصية displayAs.

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

export default function Home() {
  const price = 1250.75;
  const currency = 'USD';

  return (
    <div>
      <h1>خيارات عرض العملة</h1>
      <p>
        الافتراضي (الرمز):
        <LocalizedCurrency
          value={price}
          currency={currency}
          displayAs="symbol"
        />
      </p>
      <p>
        الاسم الكامل (الاسم):
        <LocalizedCurrency
          value={price}
          currency={currency}
          displayAs="name"
        />
      </p>
      <p>
        رمز ISO (الرمز):
        <LocalizedCurrency
          value={price}
          currency={currency}
          displayAs="code"
        />
      </p>
    </div>
  );
}

عند زيارة /en، سترى "1,250.75 US dollars" لخيار 'name'. عند زيارة /es، سيتم عرض نفس السطر كـ "1.250,75 dólares estadounidenses"، مما يوضح أن اسم العملة نفسه قد تمت ترجمته وتنسيقه بشكل صحيح.