رأس المتجر

تجريبي

رأس المتجر: الشعار والبحث في المنتجات والحساب والمفضلة والسلة بعددها، ثم شريط الأقسام. على الهاتف يصير البحث صفًا وحده والأقسام خلف زرّ القائمة.

افتح في Figma

المعاينة

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

التثبيت

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

الاستخدام

store-header.tsx

import { StoreHeader } from "@/components/ui/store-header";<StoreHeader  logo={<a href="/"><Logo /></a>}  search={{ onValueChange: setQuery }}  categories={[{ label: "New in", href: "/new" }, { label: "Sale", href: "/sale", current: true }]}  cartCount={2}  cartHref="/cart"  wishlistHref="/wishlist"  accountHref="/account"  onMenuClick={openCategories}/>

مرجع الخصائص

StoreHeader

الخاصية	النوع	الافتراضي	الوصف
`logo`	`ReactNode`	لا يوجد	شعار المتجر برابط إلى الرئيسية.
`search`	`SearchField props`	لا يوجد	حقل البحث (SearchField). اسمه افتراضيًا «ابحث عن المنتجات».
`categories`	`{ label, href, current? }[]`	لا يوجد	شريط الأقسام؛ `current` يضع `aria-current` واللون البراندي.
`cartCount / cartHref`	`number / string`	لا يوجد	العدد على السلة واسمها («السلة، عدد القطع 2»).
`wishlistHref / accountHref`	`string`	لا يوجد	رابطا المفضلة والحساب (الحساب على الشاشات الكبيرة فقط، كما في Figma).
`onMenuClick`	`() => void`	لا يوجد	زرّ القائمة على الهاتف؛ افتح به Sheet أو Drawer بالأقسام.

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

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

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

المفتاح	ما يفعله
`Tab`	الشعار ثم البحث ثم الحساب والمفضلة والسلة ثم الأقسام.

ARIA

header فيه حقل بحث role="search" وتنقّل nav باسم «الأقسام».
زرّ السلة يقول عدده («السلة، عدد القطع 2»)، والشارة الظاهرة مخفية عن قارئات الشاشة كي لا يُقرأ الرقم مرتين.

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

ينعكس

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

لا ينعكس

الشعار ورموز الحساب والقلب والحقيبة لا تنعكس.

الأرقام: عدد السلة يتبع numerals.
الخط العربي: الأقسام label-16 Medium بلون gray/strong، والحالي Semibold بلون brand/intense.