صف الحدث الاقتصادي

تجريبي

احصل على Ritla UI

صف في التقويم الاقتصادي: الوقت والدولة والحدث مع توقعاته، وأشرطة التأثير، وتذكير.

افتح في Figma

المعاينة

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

التثبيت

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

الاستخدام

event-row.tsx

import { EventRow } from "@/components/ui/event-row";<EventRow time="14:30" country="US" title="US CPI (YoY)" details="Forecast 3.1%  Previous 3.2%" impact="high" impactLabel="High impact" />

مرجع الخصائص

EventRow

الخاصية	النوع	الافتراضي	الوصف
`time / dateTime`	`string`	لا يوجد	الوقت المحلي وقيمته المقروءة آليًا.
`country`	`string`	لا يوجد	رمز ISO للدولة: العلم.
`title / details`	`ReactNode`	لا يوجد	الحدث، وتوقعه وقيمته السابقة.
`impact`	`"low" \| "medium" \| "high"`	`"low"`	خاصية Impact: من شريط إلى ثلاثة؛ المرتفع بالأحمر.
`impactLabel`	`string`	لا يوجد	التأثير بالكلمات لقارئات الشاشة.
`reminder`	`{ on, label, onToggle }`	لا يوجد	الجرس، زر تبديل. اتركه لإخفائه.

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

لوحة المفاتيح

المفاتيح مكتوبة للاتجاه من اليسار إلى اليمين. في الاتجاه من اليمين يتبادل السهمان دورهما: السهم المتجه مع اتجاه القراءة ينقلك إلى الأمام.

المفتاح	ما يفعله
`EnterSpace`	يشغّل التذكير أو يوقفه.

ARIA

الأشرطة صورة واحدة يسمّيها impactLabel، فلا يعتمد التأثير على اللون.
الجرس زر تبديل (aria-pressed) بمساحة لمس 48.

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

ينعكس

ينتقل الوقت إلى اليمين والجرس إلى اليسار.

لا ينعكس

أشرطة التأثير تنمو من اليسار إلى اليمين كمقياس الإشارة، والأعلام لا تنعكس أبدًا.

الأرقام: الأوقات والأرقام يُنسّقها التطبيق، والوقت يبقى من اليسار إلى اليمين.
الخط العربي: numeric-14 Medium للوقت وlabel-14 Medium للحدث.