وعد المتجر
وعد من المتجر برمز: توصيل مجاني، إرجاع، دفع عند الاستلام، دفع آمن. ثلاثة أو أربعة في صف.
المعاينة
«معكوس» هو المحتوى الإنجليزي نفسه من اليمين إلى اليسار، ليفصل خطأ الاتجاه عن خطأ الترجمة.
المعاينةالكود
إنجليزيمعكوسعربي
← RTL
التثبيت
أضف المكوّن
npx ritla add incentiveويعمل أيضًا مع shadcn:
npx shadcn@latest add @ritla/incentiveأو انسخه يدويًا
التثبيت اليدوي ينسخ مصدر المكوّن إلى مشروعك. المصدر يأتي مع ترخيص Ritla UI، وأداة سطر الأوامر هي الطريق الأقصر إلى الملفات نفسها.
الاستخدام
import { Incentive } from "@/components/ui/incentive";import { TruckIcon } from "@phosphor-icons/react/ssr";<Incentive icon={TruckIcon} title="Free delivery" description="On orders over JOD 300 in Amman and Zarqa." />مرجع الخصائص
Incentive
| الخاصية | النوع | الافتراضي | الوصف |
|---|---|---|---|
icon | IconComponent | لا يوجد | رمز الوعد من Phosphor. زخرفي: العنوان يقول المعنى. |
title | ReactNode | لا يوجد | الوعد بكلمتين أو ثلاث. |
description | ReactNode | لا يوجد | سطر يوضح الشرط. |
إمكانية الوصول
ARIA
- نص ورمز مخفي عن قارئات الشاشة؛ لا شيء تفاعلي.
ملاحظات العربية والاتجاه
ينعكس
- مربع الرمز على اليمين والنص على يساره؛ الرموز الاتجاهية (سهم الإرجاع) تنعكس وحدها.
لا ينعكس
- الشاحنة والدرع والنقود لا تنعكس.
- الأرقام
- الأرقام في الوصف نص منك («300 د.أ»).
- الخط العربي
label-16Semibold للعنوان وbody-14بلونgray/mutedللوصف.