تطبيق: بناء مكون تقييم باستخدام Compound Components

ستبني في هذا التمرين مكون Rating للعرض فقط. يتكون المكون من أجزاء مستقلة لكنها تقرأ قيمة التقييم نفسها من Context.

المطلوب

أكمل المكونات التالية في rating.tsx:

Rating
RatingLabel
RatingStars
RatingStar
RatingValue

يجب أن تعمل معا بهذا الشكل:

tsx

<Rating value={4}>
  <RatingLabel>
    Course Rating
  </RatingLabel>
 
  <RatingStars>
    <RatingStar value={1} />
    <RatingStar value={2} />
    <RatingStar value={3} />
    <RatingStar value={4} />
    <RatingStar value={5} />
  </RatingStars>
 
  <RatingValue />
</Rating>

مخطط يوضح Rating و في داخله RatingLabel و RatingStars و عدة عناصر RatingStar ثم RatingValue — أجزاء Rating التي ستبنيها في التمرين

المتطلبات

1. المكون الرئيسي (`Rating`)

اجعل Rating مسؤولا عن:

استقبال قيمة التقييم الحالية عبر value.
مشاركة هذه القيمة مع بقية أجزاء المكون باستخدام Context.

2. عنصر التسمية (`RatingLabel`)

اجعل RatingLabel يعرض عنوان التقييم:

tsx

<RatingLabel>
  Course Rating
</RatingLabel>

3. عنصر النجوم (`RatingStars`)

اجعل RatingStars حاوية لعناصر النجوم.

4. عنصر النجمة (`RatingStar`)

يستقبل RatingStar قيمة النجمة عبر value. اعرض ★ إذا كانت هذه القيمة أصغر من التقييم الحالي أو مساوية له و إلا فاعرض ☆.

مثلا مع <Rating value={3}> تكون النتيجة المتوقعة:

txt

★★★☆☆

5. عنصر القيمة (`RatingValue`)

اجعل RatingValue يقرأ التقييم من Context و يعرضه هكذا:

txt

4/5

تلميحات

ستجد createContext و useContext جاهزين في rating-context.tsx.
اقرأ القيمة داخل RatingStar و RatingValue عبر Context، لا عبر props إضافية.
لا تضف تفاعلا أو تنسيقا؛ هذا المكون يعرض التقييم فقط.

النتيجة المتوقعة

حين تنجح الاختبارات، ستكون الأجزاء قادرة على قراءة القيمة المشتركة مع بقاء اختيارها و ترتيبها بيد من يستخدم Rating.