بطاقة التحويل بين العملات

تجريبي

احصل على Ritla UI

التحويل بين العملات أو الأصول: ما ترسله وما تستلمه، وزر تبديل بينهما، والرسوم، وزر رئيسي واحد.

افتح في Figma

المعاينة

«معكوس» هو المحتوى الإنجليزي نفسه من اليمين إلى اليسار، ليفصل خطأ الاتجاه عن خطأ الترجمة.

التثبيت

أضف المكوّن
$ npx ritla add swap-card
ويعمل أيضًا مع shadcn: npx shadcn@latest add @ritla/swap-card
الاعتماديات التي يضيفها
@phosphor-icons/react
أو انسخه يدويًا
التثبيت اليدوي ينسخ مصدر المكوّن إلى مشروعك. المصدر يأتي مع ترخيص Ritla UI، وأداة سطر الأوامر هي الطريق الأقصر إلى الملفات نفسها.

الاستخدام

swap-card.tsx

import { SwapCard } from "@/components/ui/swap-card";<SwapCard  send={{ label: "You send", amount, onAmountChange: setAmount, currency: { code: "JOD", country: "JO" } }}  receive={{ label: "You get", amount: converted, currency: { code: "USD", country: "US" } }}  onSwap={swap}  labels={{ swap: "Swap currencies", changeCurrency: "Change currency" }}  action={<Button className="w-full">Review</Button>}/>

مرجع الخصائص

SwapCard

الخاصية	النوع	الافتراضي	الوصف
`send / receive`	`SwapField`	لا يوجد	كل جهة: التسمية والمبلغ وonAmountChange (اتركه للقراءة فقط) والعملة وonCurrencyClick والتعليق.
`onSwap`	`() => void`	لا يوجد	يبدّل الجهتين.
`labels`	`{ swap, changeCurrency }`	لا يوجد	أسماء الأزرار بلغة الصفحة.
`details`	`{ label, value }[]`	لا يوجد	الرسوم ووقت الوصول…
`action`	`ReactNode`	لا يوجد	الزر الرئيسي الوحيد.

إمكانية الوصول

ARIA

كل مبلغ حقل له تسمية ووصف من التعليق، والجهة المحوّلة للقراءة فقط.
زر التبديل بين الحقلين في ترتيب التنقل أيضًا.

ملاحظات العربية والاتجاه

ينعكس

المبلغ يمينًا وحبة العملة يسارًا.

لا ينعكس

سهما التبديل يشيران إلى الأعلى والأسفل ولا ينعكسان.

الأرقام: يمكن كتابة المبالغ بالأرقام اللاتينية أو العربية الهندية؛ اقرأها بـ parseAmount من @/lib/money.
الخط العربي: numeric-24 Semibold للمبالغ.