# رأس القسم

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

الصفحة: https://ritla.app/ar/ui/section-header

## التثبيت

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

```bash
npx ritla add section-header
```

أو بأداة shadcn:

```bash
npx shadcn@latest add @ritla/section-header
```

## الاستخدام

```tsx
import { SectionHeader } from "@/components/ui/section-header";

<SectionHeader
  eyebrow="Blocks"
  title="From parts to whole products."
  description="Ready-made blocks for the screens Gulf products need."
  action={<TextLink href="/blocks" iconTrailing={ArrowRightIcon}>Browse all blocks</TextLink>}
/>
```

## أمثلة

### الأجزاء التي يحتاجها القسم فقط

العنوان وحده، أو التسمية والعنوان دون وصف. يأخذ العنوان مستوى `level` في ترتيب عناوين الصفحة.

معاينة حيّة: https://ritla.app/_kanz/preview/arabic/section-header-parts

## مرجع الخصائص

### `SectionHeader`

| الخاصية | النوع | الافتراضي | الوصف |
| --- | --- | --- | --- |
| `title` | `ReactNode` | لا يوجد | عنوان القسم. |
| `level` | `1 \| 2 \| 3` | `2` | مستوى العنوان في ترتيب عناوين الصفحة. |
| `eyebrow` | `ReactNode` | لا يوجد | تسمية قصيرة فوق العنوان. |
| `description` | `ReactNode` | لا يوجد | جملة أو جملتان بجانب العنوان، وتحته على الهاتف. |
| `action` | `ReactNode` | لا يوجد | رابط أو زر واحد تحت الوصف، وغالبًا `TextLink` إلى الصفحة الكاملة. |

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

لوحة المفاتيح (المفاتيح مكتوبة للاتجاه من اليسار إلى اليمين، ويتبادل السهمان في الاتجاه من اليمين إلى اليسار):

- `Tab`: إلى الرابط أو الزر في `action`. لا شيء آخر في الرأس يتلقى التركيز.

ARIA:

- العنوان عنوان حقيقي بالمستوى `level`، فيظهر في قائمة عناوين قارئ الشاشة.
- الرأس `div` لا `header`، لأن `header` خارج `section` يصير معلم الصفحة الرئيسي.
- الأحرف الكبيرة في التسمية تنسيق CSS، فيقرأ قارئ الشاشة الكلمات كما كُتبت.

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

ينعكس:

- العنوان يبدأ من اليمين، والوصف والرابط على يساره.
- سهم الرابط يشير إلى اليسار.

لا ينعكس:

- ترتيب العنوان ثم الوصف على الهاتف: عمود واحد في الاتجاهين.

الأرقام: لا أرقام يكتبها الرأس بنفسه؛ الأرقام في نصوصك كما تمرّرها.

الخط العربي: التسمية بالإنجليزية `label-12` بوزن Medium وبأحرف كبيرة متباعدة؛ وبالعربية `label-14` بوزن Semibold دون تغيير حالة الأحرف ودون تباعد، فالعربية بلا أحرف كبيرة والحروف المتصلة لا تُباعَد. العنوان `heading-36` ثم `heading-48` من `md` و`heading-54` من `lg`.