أنت تعمل على مشروع React وعثرت على مقتطف تعليمات برمجية لمكون يسمى "Demo". مهمتك هي إكمال التنفيذ عن طريق إضافة بعض الوظائف إلى المكون "العرض التوضيحي".

المكون `Demo` هو مكون وظيفي مكتوب بلغة TypeScript، ويتم استيراده من وحدة نمطية أخرى. لا يأخذ أي دعائم ويعرض عنصر `<div>` واحد. ومع ذلك، فإن محتوى `<div>` يتم تركه حاليًا كعنصر نائب للتعليق.

مهمتك هي تعديل المكون `العرض التوضيحي` بحيث يعرض قائمة من الأرقام من 1 إلى 10 بشكل شامل. يجب أن يكون كل رقم مغلفًا بعنصر `<span>`، ويجب أن تكون هناك مسافة بين كل رقم.

يجب تنفيذ الحل الخاص بك عن طريق تحديث المكون "العرض التوضيحي" ويجب ألا يقدم أي مكونات أو مكتبات جديدة.
{"source": "argilla/DistiCoder-dpo-binarized", "kind": "synthetic", "evolved_from": null}