التحدي: صفحة قائمة المنتجات

بيان المشكلة

أنت مُكلَّف بإنشاء صفحة لعرض المنتجات كجزء من تطبيق متجر إلكتروني أكبر. يجب أن تتضمن هذه الصفحة رأسًا، وتعرض قائمة بالمنتجات، وتُشير إلى ما إذا كان المنتج معروضًا للبيع، وتحتوي على زر "اشترِ الآن" الذي يستجيب لنقرات المستخدم. يجب أن تكون جميع المكونات بدون جنسية، وأن يكون جميع السلوكيات أو المحتوى الديناميكي مُدارًا بواسطة عناصر إضافية.

المهمة 1: بناء هيكل واجهة المستخدم وتطبيق الأنماط

1. قم بإنشاء مكون Header يعرض عنوانًا، على سبيل المثال، "منتجاتنا".

2. أنشئ مكون ProductItem يقبل ...