المراجعة

تجريبي

احصل على Ritla UI

مراجعة عميل: الكاتب والتاريخ والنجوم والنص، ووسم «عملية شراء موثقة». تتراصّ المراجعات قائمةً بخط بينها.

افتح في Figma

المعاينة

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

التثبيت

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

الاستخدام

review.tsx

import { Review } from "@/components/ui/review";<Review author="Noor Al-Hassan" date={{ label: "12 September 2026", dateTime: "2026-09-12" }} rating={5} verified>  Comfortable and solid.</Review>

مرجع الخصائص

Review

الخاصية	النوع	الافتراضي	الوصف
`author / avatar`	`string`	لا يوجد	الاسم كما كتبه صاحبه، وصورته (أو الأحرف الأولى دونها).
`date`	`{ label, dateTime }`	لا يوجد	التاريخ منسّقًا، ومعه قيمته الآلية لعنصر `time`.
`rating`	`number`	لا يوجد	الدرجة من 1 إلى 5.
`children`	`ReactNode`	لا يوجد	نص المراجعة بأي لغة كتبها العميل.
`verified`	`boolean`	لا يوجد	وسم «عملية شراء موثقة» الأخضر.
`headingLevel`	`2 \| 3 \| 4`	`3`	مستوى عنوان الكاتب.

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

ARIA

article يبدأ بعنوان باسم الكاتب، فيتنقّل قارئ الشاشة بين المراجعات بالعناوين.
النجوم صورة واحدة («التقييم 5 من 5»)، والصورة الرمزية مخفية لأن الاسم بجانبها.

تجنّب

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

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

ينعكس

الكاتب على اليمين والنجوم على اليسار.

لا ينعكس

النجوم وعلامة الصح في الوسم لا تنعكس.

الأرقام: التاريخ نص منسّق منك، فنسّقه بأرقام الصفحة.
الخط العربي: label-14 Semibold للاسم، label-12 للتاريخ، وbody-16 بلون gray/strong للنص.
النص ثنائي الاتجاه: النص dir="auto": مراجعة إنجليزية في صفحة عربية تبدأ من اليسار وتنتهي نقطتها في مكانها.