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

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

الصفحة: https://ritla.app/ar/ui/audience-card

## التثبيت

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

```bash
npx ritla add audience-card
```

أو بأداة shadcn:

```bash
npx shadcn@latest add @ritla/audience-card
```

الاعتماديات: `@phosphor-icons/react`

## الاستخدام

```tsx
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`.