الثيم الافتراضي

المكوّنات

بطاقة الجمهور

بطاقة لمن صُمّم المنتج: رسم لعملهم فوق شبكة، ثم من هم وجملة واحدة ونقاط قصيرة ورابط في نهاية البطاقة.

المعاينة

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

التثبيت

قريبًايُفتح التثبيت من السجل قريبًا، وهذه هي الأوامر التي ستشغّلها حينها.

npx ritla add audience-card

ويعمل أيضًا مع shadcn: npx shadcn@latest add @ritla/audience-card

الاعتماديات التي يضيفها: @phosphor-icons/react

التثبيت اليدوي ينسخ مصدر المكوّن إلى مشروعك. المصدر يأتي مع ترخيص Ritla UI، وأداة سطر الأوامر هي الطريق الأقصر إلى الملفات نفسها.

الاستخدام

import { AudienceCard } from "@/components/ui/audience-card";

<AudienceCard
  visual={<YourDrawing />}
  title="Product teams"
  description="Bring Arabic behaviour into the product from the first component."
  points={["Arabic and English from one codebase", "Components built against the documented rules"]}
  action={<TextLink href="/ui" iconTrailing={ArrowRightIcon}>Browse components</TextLink>}
/>

مرجع الخصائص

AudienceCard

الخاصية	النوع	الافتراضي	الوصف
`title`	`ReactNode`	لا يوجد	لمن هذه البطاقة («فرق المنتجات»).
`level`	`2 \| 3 \| 4`	`3`	مستوى العنوان في ترتيب عناوين الصفحة.
`visual`	`ReactNode`	لا يوجد	رسم زخرفي لعملهم فوق شبكة البناء، ويُخفى عن قارئ الشاشة.
`description`	`ReactNode`	لا يوجد	جملة واحدة عمّا يحصلون عليه.
`points`	`ReactNode[]`	لا يوجد	نقطتان أو ثلاث قصيرة، كلٌّ بعد علامة صح.
`action`	`ReactNode`	لا يوجد	رابط واحد في نهاية البطاقة، فتتحاذى روابط البطاقات المتجاورة.

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

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

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

المفتاح	ما يفعله
`Tab`	إلى رابط البطاقة فقط.

ARIA

البطاقة article وعنوانها عنوان حقيقي بالمستوى level.
الرسم زخرفي (aria-hidden)، فالنص يقول كل ما يقوله.

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

ينعكس

النص يبدأ من اليمين، وعلامات الصح في بداية كل نقطة على اليمين.
سهم الرابط يشير إلى اليسار.
الظل الحادّ يقع أسفل اليسار، وعند تمرير المؤشر فوقها ترتفع البطاقة نحو اليمين وإلى الأعلى ويكبر ظلها.

لا ينعكس

الرسم نفسه: رسم من اليسار إلى اليمين، يرسم الاتجاهين حين يحتاج.

الأرقام: لا أرقام تكتبها البطاقة بنفسها.
الخط العربي: العنوان heading-28 بوزن Medium (Semibold بالعربية)، والجملة body-16، والنقاط body-14.