From aa4ee91c0022edd6a1a2daa2c96756807831f600 Mon Sep 17 00:00:00 2001
From: Eihab Khan <mastereihab@gmail.com>
Date: Wed, 21 Jun 2023 19:06:27 +0100
Subject: [PATCH] improve example code content

---
 src/components/Layout/Page.tsx                |   1 +
 .../javascript-in-jsx-with-curly-braces.md    | 134 +++++++++---------
 2 files changed, 68 insertions(+), 67 deletions(-)

diff --git a/src/components/Layout/Page.tsx b/src/components/Layout/Page.tsx
index 967a7fafc..7bf5f636f 100644
--- a/src/components/Layout/Page.tsx
+++ b/src/components/Layout/Page.tsx
@@ -135,6 +135,7 @@ export function Page({children, toc, routeTree, meta, section}: PageProps) {
         <Suspense fallback={null}>
           <main className="min-w-0 isolate">
             <article
+              dir="rtl"
               className="break-words font-normal text-primary dark:text-primary-dark"
               key={asPath}>
               {content}
diff --git a/src/content/learn/javascript-in-jsx-with-curly-braces.md b/src/content/learn/javascript-in-jsx-with-curly-braces.md
index 467eb6a1d..c20cc8414 100644
--- a/src/content/learn/javascript-in-jsx-with-curly-braces.md
+++ b/src/content/learn/javascript-in-jsx-with-curly-braces.md
@@ -28,8 +28,8 @@ export default function Avatar() {
   return (
     <img
       className="avatar"
-      src="https://i.imgur.com/7vQD0fPs.jpg"
-      alt="غريغوريو واي زارا"
+      src="https://i.imgur.com/NpGVLas.jpg"
+      alt="نجيب محفوظ"
     />
   );
 }
@@ -41,7 +41,7 @@ export default function Avatar() {
 
 </Sandpack>
 
-هنا، يتم تمرير `"https://i.imgur.com/7vQD0fPs.jpg"` و `"غريغوريو واي زارا"` كنصوص.
+هنا، يتم تمرير `"https://i.imgur.com/NpGVLas.jpg"` و `"نجيب محفوظ"` كنصوص.
 
 ولكن ماذا لو كنت ترغب في تحديد `src` أو نص `alt` بشكل ديناميكي؟ يمكنك **استخدام قيمة من JavaScript عن طريق استبدال `"`و `"` بـ `{`و `}`**:
 
@@ -49,8 +49,8 @@ export default function Avatar() {
 
 ```js
 export default function Avatar() {
-  const avatar = 'https://i.imgur.com/7vQD0fPs.jpg';
-  const description = 'غريغوريو واي زارا';
+  const avatar = 'https://i.imgur.com/NpGVLas.jpg';
+  const description = 'نجيب محفوظ';
   return (
     <img
       className="avatar"
@@ -77,7 +77,7 @@ JSX هي طريقة خاصة لكتابة JavaScript. وهذا يعني أنه 
 
 ```js
 export default function TodoList() {
-  const name = 'غريغوريو واي زارا';
+  const name = 'نجيب محفوظ';
   return (
     <h1>قائمة مهام {name}</h1>
   );
@@ -86,7 +86,7 @@ export default function TodoList() {
 
 </Sandpack>
 
-حاول تغيير قيمة `name` من `'غريغوريو واي زارا'` إلى `'هايدي لامار'`. لاحظ كيف يتغير عنوان القائمة؟
+حاول تغيير قيمة `name` من `'نجيب محفوظ'` إلى `'أحمد زويل'`. لاحظ كيف يتغير عنوان القائمة؟
 
 أي تعبير JavaScript سيعمل بين الأقواس المنحنية، بما في ذلك استدعاءات الدوال مثل `formatDate()`:
 <Sandpack>
@@ -96,7 +96,7 @@ const today = new Date();
 
 function formatDate(date) {
   return new Intl.DateTimeFormat(
-    'en-US',
+    'ar-EG',
     { weekday: 'long' }
   ).format(date);
 }
@@ -114,12 +114,12 @@ export default function TodoList() {
 
 يمكنك استخدام الأقواس المنحنية في JSX بطريقتين فقط:
 
-1. **كنص** مباشرة داخل وسم JSX: `<h1>{name}'s قائمة المهام</h1>` يعمل، ولكن `<{tag}>قائمة المهام لـغريغوريو واي زارا </{tag}>` لن يعمل.
+1. **كنص** مباشرة داخل وسم JSX: `<h1>{name}لـ  قائمة المهام</h1>` يعمل، ولكن `<{tag}>قائمة المهام لـنجيب محفوظ </{tag}>` لن يعمل.
 2. **كخصائص** تأتي فورًا بعد علامة `=`: `src={avatar}` ستقرأ قيمة المتغير `avatar`، ولكن `src="{avatar}"` ستمرره `"{avatar}"` كنص.
 
 ## استخدام "أقواس منحنية مزدوجة": CSS وكائنات أخرى داخل JSX {/*using-double-curlies-css-and-other-objects-in-jsx*/}
 
-بالإضافة إلى النصوص والأرقام وتعابير JavaScript الأخرى، يمكنك تمرير الكائنات في JSX. يتم تمييز الكائنات أيضًا بواسطة الأقواس المنحنية، مثل `{ name: "هايدي لامار", inventions: 5 }`. لذلك، لتمرير كائن JavaScript في JSX، يجب عليك إحاطة الكائن بزوج آخر من الأقواس المنحنية: `person={{ name: "هايدي لامار", inventions: 5 }}`.
+بالإضافة إلى النصوص والأرقام وتعابير JavaScript الأخرى، يمكنك تمرير الكائنات في JSX. يتم تمييز الكائنات أيضًا بواسطة الأقواس المنحنية، مثل `{ name: "أحمد زويل", inventions: 5 }`. لذلك، لتمرير كائن JavaScript في JSX، يجب عليك إحاطة الكائن بزوج آخر من الأقواس المنحنية: `person={{ name: "أحمد زويل", inventions: 5 }}`.
 
 قد ترى ذلك في أنماط CSS المضمنة فيJSX. React لا تتطلب منك استخدام أنماط CSS مضمنة (فئة CSS يعمل جيداً في معظم الحالات). ولكن عندما تحتاج إلى أسلوب مضمن، يمكنك تمرير كائن إلى خاصية `style`:
 
@@ -132,9 +132,9 @@ export default function TodoList() {
       backgroundColor: 'black',
       color: 'pink'
     }}>
-      <li>تحسين الهاتف</li>
-      <li>تجهيز محاضرات عن الطيران</li>
-      <li>العمل على محرك بالوقود الكحولي</li>
+      <li>كتابة روايات وأعمال أدبية</li>
+      <li>الدفاع عن الحرية الأدبية والتعبير</li>
+      <li>تعزيز الوعي الثقافي والأدبي</li>
     </ul>
   );
 }
@@ -176,7 +176,7 @@ ul { padding: 20px 20px 20px 40px; margin: 0; }
 
 ```js
 const person = {
-  name: 'غريغوريو واي زارا',
+  name: 'نجيب محفوظ',
   theme: {
     backgroundColor: 'black',
     color: 'pink'
@@ -186,16 +186,16 @@ const person = {
 export default function TodoList() {
   return (
     <div style={person.theme}>
-      <h1>{person.name}'s Todos</h1>
+      <h1>مهام {person.name}</h1>
       <img
         className="avatar"
-        src="https://i.imgur.com/7vQD0fPs.jpg"
-        alt="غريغوريو واي زارا"
+        src="https://i.imgur.com/NpGVLas.jpg"
+        alt="نجيب محفوظ"
       />
       <ul>
-        <li>تحسين الهاتف</li>
-        <li>تجهيز محاضرات عن الطيران</li>
-        <li>العمل على محرك بالوقود الكحولي</li>
+        <li>كتابة روايات وأعمال أدبية</li>
+        <li>الدفاع عن الحرية الأدبية والتعبير</li>
+        <li>تعزيز الوعي الثقافي والأدبي</li>
       </ul>
     </div>
   );
@@ -214,7 +214,7 @@ body > div > div { padding: 20px; }
 
 ```js
 const person = {
-  name: 'غريغوريو واي زارا',
+  name: 'نجيب محفوظ',
   theme: {
     backgroundColor: 'black',
     color: 'pink'
@@ -252,7 +252,7 @@ JSXهي لغة قوالب بسيطة جدًا لأنها تسمح لك بتنظ
 
 ```js
 const person = {
-  name: 'غريغوريو واي زارا',
+  name: 'نجيب محفوظ',
   theme: {
     backgroundColor: 'black',
     color: 'pink'
@@ -262,16 +262,16 @@ const person = {
 export default function TodoList() {
   return (
     <div style={person.theme}>
-      <h1>{person}'s Todos</h1>
+      <h1>مهام {person}</h1>
       <img
         className="avatar"
-        src="https://i.imgur.com/7vQD0fPs.jpg"
+        src="https://i.imgur.com/NpGVLas.jpg"
         alt="Gregorio Y. Zara"
       />
       <ul>
-        <li>تحسين الهاتف</li>
-        <li>تجهيز محاضرات عن الطيران</li>
-        <li>العمل على محرك بالوقود الكحولي</li>
+        <li>كتابة روايات وأعمال أدبية</li>
+        <li>الدفاع عن الحرية الأدبية والتعبير</li>
+        <li>تعزيز الوعي الثقافي والأدبي</li>
       </ul>
     </div>
   );
@@ -300,7 +300,7 @@ body > div > div { padding: 20px; }
 
 ```js
 const person = {
-  name: 'غريغوريو واي زارا',
+  name: 'نجيب محفوظ',
   theme: {
     backgroundColor: 'black',
     color: 'pink'
@@ -310,16 +310,16 @@ const person = {
 export default function TodoList() {
   return (
     <div style={person.theme}>
-      <h1>{person.name}'s Todos</h1>
+      <h1>مهام {person.name}</h1>
       <img
         className="avatar"
-        src="https://i.imgur.com/7vQD0fPs.jpg"
-        alt="غريغوريو واي زارا"
+        src="https://i.imgur.com/NpGVLas.jpg"
+        alt="نجيب محفوظ"
       />
       <ul>
-        <li>تحسين الهاتف</li>
-        <li>تجهيز محاضرات عن الطيران</li>
-        <li>العمل على محرك بالوقود الكحولي</li>
+        <li>كتابة روايات وأعمال أدبية</li>
+        <li>الدفاع عن الحرية الأدبية والتعبير</li>
+        <li>تعزيز الوعي الثقافي والأدبي</li>
       </ul>
     </div>
   );
@@ -344,7 +344,7 @@ body > div > div { padding: 20px; }
 
 ```js
 const person = {
-  name: 'غريغوريو واي زارا',
+  name: 'نجيب محفوظ',
   theme: {
     backgroundColor: 'black',
     color: 'pink'
@@ -354,16 +354,16 @@ const person = {
 export default function TodoList() {
   return (
     <div style={person.theme}>
-      <h1>{person.name}'s Todos</h1>
+      <h1>مهام {person.name}</h1>
       <img
         className="avatar"
-        src="https://i.imgur.com/7vQD0fPs.jpg"
-        alt="غريغوريو واي زارا"
+        src="https://i.imgur.com/NpGVLas.jpg"
+        alt="نجيب محفوظ"
       />
       <ul>
-        <li>تحسين الهاتف</li>
-        <li>تجهيز محاضرات عن الطيران</li>
-        <li>العمل على محرك بالوقود الكحولي</li>
+        <li>كتابة روايات وأعمال أدبية</li>
+        <li>الدفاع عن الحرية الأدبية والتعبير</li>
+        <li>تعزيز الوعي الثقافي والأدبي</li>
       </ul>
     </div>
   );
@@ -386,8 +386,8 @@ body > div > div { padding: 20px; }
 
 ```js
 const person = {
-  name: 'غريغوريو واي زارا',
-  imageUrl: "https://i.imgur.com/7vQD0fPs.jpg",
+  name: 'نجيب محفوظ',
+  imageUrl: "https://i.imgur.com/NpGVLas.jpg",
   theme: {
     backgroundColor: 'black',
     color: 'pink'
@@ -397,16 +397,16 @@ const person = {
 export default function TodoList() {
   return (
     <div style={person.theme}>
-      <h1>{person.name}'s Todos</h1>
+      <h1>مهام {person.name}</h1>
       <img
         className="avatar"
         src={person.imageUrl}
-        alt="غريغوريو واي زارا"
+        alt="نجيب محفوظ"
       />
       <ul>
-        <li>تحسين الهاتف</li>
-        <li>تجهيز محاضرات عن الطيران</li>
-        <li>العمل على محرك بالوقود الكحولي</li>
+        <li>كتابة روايات وأعمال أدبية</li>
+        <li>الدفاع عن الحرية الأدبية والتعبير</li>
+        <li>تعزيز الوعي الثقافي والأدبي</li>
       </ul>
     </div>
   );
@@ -427,7 +427,7 @@ body > div > div { padding: 20px; }
 
 في الكائن أدناه، يتم تقسيم العنوان الكامل للصورة إلى أربعة أجزاء: العنوان الأساس و`imageId` و`imageSize` وامتداد الملف.
 
-نريد أن يتم دمج عنوان URL للصورة باستخدام هذه الخصائص معًا: العنوان الأساس (دائمًا `'https://i.imgur.com/'`) و`imageId` (`'7vQD0fP'`) و `imageSize` (`'s'`)، وامتداد الملف (دائمًا `'.jpg'`). ومع ذلك، هناك خطأ في كيفية تحديد الوسم `<img>` لخاصية `src` الخاصة به.
+نريد أن يتم دمج عنوان URL للصورة باستخدام هذه الخصائص معًا: العنوان الأساس (دائمًا `'https://i.imgur.com/'`) و`imageId` (`'NpGVLas'`) و `imageSize` (`'s'`)، وامتداد الملف (دائمًا `'.jpg'`). ومع ذلك، هناك خطأ في كيفية تحديد الوسم `<img>` لخاصية `src` الخاصة به.
 
 هل يمكنك إصلاح الخطأ؟
 
@@ -437,8 +437,8 @@ body > div > div { padding: 20px; }
 
 const baseUrl = 'https://i.imgur.com/';
 const person = {
-  name: 'غريغوريو واي زارا',
-  imageId: '7vQD0fP',
+  name: 'نجيب محفوظ',
+  imageId: 'NpGVLas',
   imageSize: 's',
   theme: {
     backgroundColor: 'black',
@@ -449,16 +449,16 @@ const person = {
 export default function TodoList() {
   return (
     <div style={person.theme}>
-      <h1>{person.name}'s Todos</h1>
+      <h1>مهام {person.name}</h1>
       <img
         className="avatar"
         src="{baseUrl}{person.imageId}{person.imageSize}.jpg"
         alt={person.name}
       />
       <ul>
-        <li>تحسين الهاتف</li>
-        <li>تجهيز محاضرات عن الطيران</li>
-        <li>العمل على محرك بالوقود الكحولي</li>
+        <li>كتابة روايات وأعمال أدبية</li>
+        <li>الدفاع عن الحرية الأدبية والتعبير</li>
+        <li>تعزيز الوعي الثقافي والأدبي</li>
       </ul>
     </div>
   );
@@ -488,8 +488,8 @@ body > div > div { padding: 20px; }
 ```js
 const baseUrl = 'https://i.imgur.com/';
 const person = {
-  name: 'غريغوريو واي زارا',
-  imageId: '7vQD0fP',
+  name: 'نجيب محفوظ',
+  imageId: 'NpGVLas',
   imageSize: 's',
   theme: {
     backgroundColor: 'black',
@@ -500,16 +500,16 @@ const person = {
 export default function TodoList() {
   return (
     <div style={person.theme}>
-      <h1>{person.name}'s Todos</h1>
+      <h1>مهام {person.name}</h1>
       <img
         className="avatar"
         src={baseUrl + person.imageId + person.imageSize + '.jpg'}
         alt={person.name}
       />
       <ul>
-        <li>تحسين الهاتف</li>
-        <li>تجهيز محاضرات عن الطيران</li>
-        <li>العمل على محرك بالوقود الكحولي</li>
+        <li>كتابة روايات وأعمال أدبية</li>
+        <li>الدفاع عن الحرية الأدبية والتعبير</li>
+        <li>تعزيز الوعي الثقافي والأدبي</li>
       </ul>
     </div>
   );
@@ -532,8 +532,8 @@ body > div > div { padding: 20px; }
 import { getImageUrl } from './utils.js'
 
 const person = {
-  name: 'غريغوريو واي زارا',
-  imageId: '7vQD0fP',
+  name: 'نجيب محفوظ',
+  imageId: 'NpGVLas',
   imageSize: 's',
   theme: {
     backgroundColor: 'black',
@@ -544,16 +544,16 @@ const person = {
 export default function TodoList() {
   return (
     <div style={person.theme}>
-      <h1>{person.name}'s Todos</h1>
+      <h1>مهام {person.name}</h1>
       <img
         className="avatar"
         src={getImageUrl(person)}
         alt={person.name}
       />
       <ul>
-        <li>تحسين الهاتف</li>
-        <li>تجهيز محاضرات عن الطيران</li>
-        <li>العمل على محرك بالوقود الكحولي</li>
+        <li>كتابة روايات وأعمال أدبية</li>
+        <li>الدفاع عن الحرية الأدبية والتعبير</li>
+        <li>تعزيز الوعي الثقافي والأدبي</li>
       </ul>
     </div>
   );