# بطاقة القالب المرسومة

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

الصفحة: https://ritla.app/ar/ui/block-tile

## التثبيت

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

```bash
npx ritla add block-tile
```

أو بأداة shadcn:

```bash
npx shadcn@latest add @ritla/block-tile
```

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

## الاستخدام

```tsx
import { BlockTile } from "@/components/ui/block-tile";

<BlockTile block="checkout" href="/blocks/checkout">
  Checkout
</BlockTile>
```

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

### `BlockTile`

| الخاصية | النوع | الافتراضي | الوصف |
| --- | --- | --- | --- |
| `block` | `BlockThumbnailName` | لا يوجد | القالب المرسوم، وهو أحد القوالب الموجودة في الكود. |
| `children` | `ReactNode` | لا يوجد | اسم القالب بلغة الصفحة، وهو نص الرابط. |
| `href / render` | `string / ReactElement` | لا يوجد | الوجهة، أو رابط موجّه (`<Link>`) يحتفظ بعنصره. |
| `onBand` | `boolean` | لا يوجد | فوق الشريط السماوي: الظل الحادّ الأعمق ليبقى ظاهرًا. |

### `BlockThumbnail`

| الخاصية | النوع | الافتراضي | الوصف |
| --- | --- | --- | --- |
| `name` | `BlockThumbnailName` | لا يوجد | رسم القالب وحده، زخرفي، 220 في 124. |

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

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

- `Tab`: إلى البطاقة، وهي رابط واحد؛ ترتفع ويتقدّم سهمها كما عند المرور بالمؤشر.

ARIA:

- البطاقة رابط واحد يُسمّى باسم القالب، والرسم زخرفي ومخفي.
- مع تقليل الحركة لا ترتفع البطاقة ولا يتحرك السهم، ويبقى تغيّر الظل.

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

ينعكس:

- الرسم كله، والظل الحادّ (أسفل اليسار)، وارتفاع البطاقة نحو بداية السطر، والسهم ودفعته.

لا ينعكس:

- الأرقام والرموز داخل الرسم، ورمز التحقق يبقى من اليسار إلى اليمين.

الأرقام: أرقام الرسم غربية في كل الأوضاع، كأرقام الرسوم المصغّرة في الكتالوج.

الخط العربي: الاسم `body-16` Medium بخط لغة الصفحة.