بطاقة المنتج

تجريبي

بطاقة منتج للشبكات والعروض ونتائج البحث: الصورة والوسم والمفضلة، ثم العلامة والاسم والتقييم والسعر. البطاقة كلها رابط إلى المنتج.

افتح في Figma

المعاينة

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

التثبيت

أضف المكوّن
$ npx ritla add product-card
ويعمل أيضًا مع shadcn: npx shadcn@latest add @ritla/product-card
الاعتماديات التي يضيفها
buttonicon-buttonpriceproduct-imageratingtag
أو انسخه يدويًا
التثبيت اليدوي ينسخ مصدر المكوّن إلى مشروعك. المصدر يأتي مع ترخيص Ritla UI، وأداة سطر الأوامر هي الطريق الأقصر إلى الملفات نفسها.

الاستخدام

product-card.tsx

import { ProductCard } from "@/components/ui/product-card";<ProductCard  name="Lina lounge chair, oak"  href="/products/lina"  brand="Dar Oak"  badge="New"  image={{ src: "/products/lina.jpg" }}  price={{ amount: 288, compareAt: 360 }}  rating={{ value: 4.8, count: 126 }}  wishlist/>

أمثلة

شبكة مع زر الإضافة

صور مربعة وزر «أضف إلى السلة»، عمودان على الهاتف.

إنجليزيمعكوسعربي

احصل على الكود

← RTL

مرجع الخصائص

ProductCard

الخاصية	النوع	الافتراضي	الوصف
`name / href`	`string`	لا يوجد	اسم المنتج ورابطه: الاسم هو الرابط، ممتدًا على البطاقة كلها.
`brand`	`ReactNode`	لا يوجد	العلامة أو الصانع فوق الاسم.
`image / ratio`	`{ src?, alt? } / "1:1" \| "4:5" \| "3:4"`	`"3:4"`	الصورة ونسبتها (Product image المكشوفة في Figma).
`badge`	`ReactNode`	لا يوجد	Show badge: كلمة قصيرة على الصورة («جديد»).
`price`	`{ amount, compareAt?, currency? … }`	لا يوجد	خصائص Price.
`rating`	`{ value, count? }`	لا يوجد	Show rating.
`wishlist`	`boolean \| { pressed, onPressedChange }`	لا يوجد	Show wishlist: زرّ القلب، بحالته إن أردت التحكم بها.
`onAddToCart`	`() => void`	لا يوجد	Show add to cart: زرّ بإطار تحت السعر.
`renderLink`	`(props) => ReactNode`	لا يوجد	عنصر الرابط (Next `<Link>`)؛ يستلم `href` والأصناف والاسم.
`headingLevel`	`2 \| 3 \| 4`	`3`	مستوى عنوان الاسم في صفحتك.

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

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

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

المفتاح	ما يفعله
`Tab`	الرابط (الاسم) ثم المفضلة ثم زرّ الإضافة: كلٌّ عنصر مستقل.

ARIA

البطاقة article واسمها عنوان، والرابط يمتد فوقها بـ ::after فتُفتح من أي مكان دون أن يصير النص كله اسمًا للرابط.
المفضلة زرّ aria-pressed باسم المنتج («حفظ كرسي لينا في المفضلة»)، وكذلك «أضف … إلى السلة».

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

ينعكس

الوسم ينتقل إلى أعلى اليمين والقلب إلى أعلى اليسار، والنصوص تبدأ من اليمين.

لا ينعكس

الصورة والقلب والنجوم لا تنعكس، والمبالغ معزولة.

الأرقام: التقييم والسعر يتبعان numerals.
الخط العربي: label-12 Medium للعلامة وlabel-16 Medium للاسم.