🔹 Blazor - إعادة استخدام المكونات (Component Reusability)

في Blazor، يُعد إعادة استخدام المكونات

🧠 لماذا نعيد استخدام المكونات؟

• لتقليل التكرار (DRY - Don't Repeat Yourself).
• لتسهيل صيانة وتحديث الكود.
• لتوحيد الشكل والتصرف عبر أجزاء متعددة من التطبيق.

---

🛠️ مثال عملي على مكون قابل لإعادة الاستخدام

نفترض أننا نريد مكونًا بسيطًا لعرض رسالة تنبيه مع نوع التنبيه (نجاح، خطأ، تحذير):

<!-- AlertBox.razor -->
<div class="alert @CssClass" role="alert">
    @Message
</div>

@code {
    [Parameter] public string Message { get; set; } = string.Empty;
    [Parameter] public string CssClass { get; set; } = "alert-info";
}

---

📥 استخدام المكون في أكثر من مكان

يمكننا الآن استخدام <AlertBox> في أي مكان بالصفحة وتغيير الرسالة أو نوع التنسيق:

<AlertBox Message="تم الحفظ بنجاح" CssClass="alert-success" />

<AlertBox Message="حدث خطأ أثناء الحفظ" CssClass="alert-danger" />

<AlertBox Message="يرجى التأكد من جميع الحقول" CssClass="alert-warning" />

---

🔁 إعادة استخدام مكونات تحتوي على RenderFragment

يمكنك أيضًا إعادة استخدام مكونات تدعم محتوى ديناميكي باستخدام RenderFragment كما في الدرس السابق:

<Card>
    <Header><h4>مرحبًا بك</h4></Header>
    <p>هذا محتوى داخلي ديناميكي.</p>
    <Footer><small>تم الإنشاء اليوم</small></Footer>
</Card>

---

🧩 تمرير مكونات إلى مكونات أخرى (Composition)

يمكنك تمرير مكونات داخل مكونات كما لو كنت تُركّب Lego! وهذا ما يُعرف بـ Component Composition.

هذا يساعد على بناء تصميم هرمي من المكونات الصغيرة التي تُشكل واجهات كاملة.

---

💡 ملاحظات هامة

• المكونات القابلة لإعادة الاستخدام يجب أن تكون عامة ولا تعتمد على بيانات ثابتة من الصفحة.
• كل مكون يمكنه استقبال [Parameter] لتخصيص سلوكه أو شكله.
• يمكنك وضع مكوناتك في مجلد /Shared لاستخدامها عبر المشروع.

---

✅ خلاصة الدرس

إعادة استخدام المكونات في Blazor تُقلل التكرار وتجعل الصيانة أسهل. باستخدام Parameter وRenderFragment، يمكنك بناء مكونات مرنة تُستخدم في كل مكان.