From 39059cab18e8628e4046200ce2c7f23981654e88 Mon Sep 17 00:00:00 2001
From: Eihab Khan <mastereihab@gmail.com>
Date: Tue, 20 Jun 2023 12:25:38 +0100
Subject: [PATCH 01/13] translate overview section

---
 src/components/Layout/Page.tsx                       |  1 +
 .../learn/javascript-in-jsx-with-curly-braces.md     | 12 +++++++-----
 src/sidebarLearn.json                                |  2 +-
 3 files changed, 9 insertions(+), 6 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 502916113..9e035daef 100644
--- a/src/content/learn/javascript-in-jsx-with-curly-braces.md
+++ b/src/content/learn/javascript-in-jsx-with-curly-braces.md
@@ -1,19 +1,21 @@
 ---
-title: JavaScript in JSX with Curly Braces
+title: JavaScript في JSX باستخدام الأقواس المعقوفة
 ---
 
 <Intro>
 
 JSX lets you write HTML-like markup inside a JavaScript file, keeping rendering logic and content in the same place. Sometimes you will want to add a little JavaScript logic or reference a dynamic property inside that markup. In this situation, you can use curly braces in your JSX to open a window to JavaScript.
 
+ تتيح لك JSX كتابة ترميز شبيه بـ HTML داخل ملف JavaScript، مما يسمح بالحفاظ على منطق التصيير والمحتوى في المكان نفسه. في بعض الأحيان، قد ترغب في إضافة بعض منطق لغة JavaScript أو الإشارة إلى خاصية ديناميكية داخل هذا الترميز. في هذه الحالة، يمكنك استخدام الأقواس المعقوفة داخل JSX الخاص بك لفتح نافذة للغة JavaScript.
+
 </Intro>
 
 <YouWillLearn>
 
-* How to pass strings with quotes
-* How to reference a JavaScript variable inside JSX with curly braces
-* How to call a JavaScript function inside JSX with curly braces
-* How to use a JavaScript object inside JSX with curly braces
+* كيفية تمرير strings باستخدام علامات التنصيص
+* كيفية الإشارة إلى متغير JavaScript داخل JSX باستخدام الأقواس المعقوفة
+* كيفية استدعاء دالة JavaScript داخل JSX باستخدام الأقواس المعقوفة
+* كيفية استخدام كائن JavaScript داخل JSX باستخدام الأقواس المعقوفة
 
 </YouWillLearn>
 
diff --git a/src/sidebarLearn.json b/src/sidebarLearn.json
index f3741eaf5..0a72a757c 100644
--- a/src/sidebarLearn.json
+++ b/src/sidebarLearn.json
@@ -64,7 +64,7 @@
           "path": "/learn/writing-markup-with-jsx"
         },
         {
-          "title": "JavaScript in JSX with Curly Braces",
+          "title": "JavaScript في JSX باستخدام الأقواس المعقوفة",
           "path": "/learn/javascript-in-jsx-with-curly-braces"
         },
         {

From 389c98033a8735375b50b635c5f44d56691b0d47 Mon Sep 17 00:00:00 2001
From: Eihab Khan <mastereihab@gmail.com>
Date: Tue, 20 Jun 2023 13:31:30 +0100
Subject: [PATCH 02/13] translate 'passing strings with quotes' section

---
 .../learn/javascript-in-jsx-with-curly-braces.md     | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

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 9e035daef..b62069ae0 100644
--- a/src/content/learn/javascript-in-jsx-with-curly-braces.md
+++ b/src/content/learn/javascript-in-jsx-with-curly-braces.md
@@ -4,8 +4,6 @@ title: JavaScript في JSX باستخدام الأقواس المعقوفة
 
 <Intro>
 
-JSX lets you write HTML-like markup inside a JavaScript file, keeping rendering logic and content in the same place. Sometimes you will want to add a little JavaScript logic or reference a dynamic property inside that markup. In this situation, you can use curly braces in your JSX to open a window to JavaScript.
-
  تتيح لك JSX كتابة ترميز شبيه بـ HTML داخل ملف JavaScript، مما يسمح بالحفاظ على منطق التصيير والمحتوى في المكان نفسه. في بعض الأحيان، قد ترغب في إضافة بعض منطق لغة JavaScript أو الإشارة إلى خاصية ديناميكية داخل هذا الترميز. في هذه الحالة، يمكنك استخدام الأقواس المعقوفة داخل JSX الخاص بك لفتح نافذة للغة JavaScript.
 
 </Intro>
@@ -19,9 +17,9 @@ JSX lets you write HTML-like markup inside a JavaScript file, keeping rendering
 
 </YouWillLearn>
 
-## Passing strings with quotes {/*passing-strings-with-quotes*/}
+## تمرير strings باستخدام علامات التنصيص {/*passing-strings-with-quotes*/}
 
-When you want to pass a string attribute to JSX, you put it in single or double quotes:
+عندما ترغب في تمرير خاصية string إلى JSX، يتم وضعها بين علامات تنصيص مفردة أو مزدوجة:
 
 <Sandpack>
 
@@ -43,9 +41,9 @@ export default function Avatar() {
 
 </Sandpack>
 
-Here, `"https://i.imgur.com/7vQD0fPs.jpg"` and `"Gregorio Y. Zara"` are being passed as strings.
+هنا ، يتم تمرير `"https://i.imgur.com/7vQD0fPs.jpg"` و `"Gregorio Y. Zara"` في صورة strings.
 
-But what if you want to dynamically specify the `src` or `alt` text? You could **use a value from JavaScript by replacing `"` and `"` with `{` and `}`**:
+ولكن ماذا لو كنت ترغب في تحديد `src` أو نص `alt` بشكل ديناميكي؟ يمكنك **استخدام قيمة من JavaScript عن طريق استبدال `"`و `"` بـ `{`و `}`**:
 
 <Sandpack>
 
@@ -69,7 +67,7 @@ export default function Avatar() {
 
 </Sandpack>
 
-Notice the difference between `className="avatar"`, which specifies an `"avatar"` CSS class name that makes the image round, and `src={avatar}` that reads the value of the JavaScript variable called `avatar`. That's because curly braces let you work with JavaScript right there in your markup!
+لاحظ الاختلاف بين `className="avatar"`، الذي يحدد اسم صنف CSS `"avatar"` الذي يجعل الصورة دائرية، و `src={avatar}` الذي يقرأ قيمة متغير JavaScript المسمى `avatar`. هذا لأن الأقواس المعقوفة تتيح لك العمل مع لغة JavaScript مباشرة داخل الترميز الخاصة بك!
 
 ## Using curly braces: A window into the JavaScript world {/*using-curly-braces-a-window-into-the-javascript-world*/}
 

From 4353501983866270160b3300eb0014d26acb3d45 Mon Sep 17 00:00:00 2001
From: Eihab Khan <mastereihab@gmail.com>
Date: Tue, 20 Jun 2023 14:20:07 +0100
Subject: [PATCH 03/13] translate 'using curly braces' section

---
 src/content/learn/javascript-in-jsx-with-curly-braces.md | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

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 b62069ae0..87acb3fd4 100644
--- a/src/content/learn/javascript-in-jsx-with-curly-braces.md
+++ b/src/content/learn/javascript-in-jsx-with-curly-braces.md
@@ -69,9 +69,9 @@ export default function Avatar() {
 
 لاحظ الاختلاف بين `className="avatar"`، الذي يحدد اسم صنف CSS `"avatar"` الذي يجعل الصورة دائرية، و `src={avatar}` الذي يقرأ قيمة متغير JavaScript المسمى `avatar`. هذا لأن الأقواس المعقوفة تتيح لك العمل مع لغة JavaScript مباشرة داخل الترميز الخاصة بك!
 
-## Using curly braces: A window into the JavaScript world {/*using-curly-braces-a-window-into-the-javascript-world*/}
+## استخدام الأقواس المعقوفة: نافذة إلى عالم JavaScript {/*using-curly-braces-a-window-into-the-javascript-world*/}
 
-JSX is a special way of writing JavaScript. That means it’s possible to use JavaScript inside it—with curly braces `{ }`. The example below first declares a name for the scientist, `name`, then embeds it with curly braces inside the `<h1>`:
+JSX هي طريقة خاصة لكتابة JavaScript. وهذا يعني أنه يمكن استخدام JavaScript داخلها - باستخدام الأقواس المعقوفة `{ }`. في المثال أدناه، يتم تعريف اسم للعالم، `name`، ثم يتم تضمينه بواسطة الأقواس المعقوفة داخل عنصر `<h1>`.
 
 <Sandpack>
 
@@ -86,10 +86,9 @@ export default function TodoList() {
 
 </Sandpack>
 
-Try changing the `name`'s value from `'Gregorio Y. Zara'` to `'Hedy Lamarr'`. See how the list title changes?
-
-Any JavaScript expression will work between curly braces, including function calls like `formatDate()`:
+حاول تغيير قيمة `name` من `'Gregorio Y. Zara'` إلى `'Hedy Lamarr'`. لاحظ كيف يتغير عنوان القائمة؟
 
+أي تعبير JavaScript سيعمل بين الأقواس المعقوفة، بما في ذلك استدعاءات الدوال مثل `formatDate()`:
 <Sandpack>
 
 ```js

From c269b7def5223908a386ca6f45647d43ebd6e0ac Mon Sep 17 00:00:00 2001
From: Eihab Khan <mastereihab@gmail.com>
Date: Tue, 20 Jun 2023 15:25:26 +0100
Subject: [PATCH 04/13] translate 'where to use curly braces' section

---
 src/content/learn/javascript-in-jsx-with-curly-braces.md | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

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 87acb3fd4..edf9accbb 100644
--- a/src/content/learn/javascript-in-jsx-with-curly-braces.md
+++ b/src/content/learn/javascript-in-jsx-with-curly-braces.md
@@ -110,12 +110,12 @@ export default function TodoList() {
 
 </Sandpack>
 
-### Where to use curly braces {/*where-to-use-curly-braces*/}
+### أين يجب استخدام الأقواس المعقوفة؟ {/*where-to-use-curly-braces*/}
 
-You can only use curly braces in two ways inside JSX:
+يمكنك استخدام الأقواس المعقوفة في JSX بطريقتين فقط:
 
-1. **As text** directly inside a JSX tag: `<h1>{name}'s To Do List</h1>` works, but `<{tag}>Gregorio Y. Zara's To Do List</{tag}>`  will not.
-2. **As attributes** immediately following the `=` sign: `src={avatar}` will read the `avatar` variable, but `src="{avatar}"` will pass the string `"{avatar}"`.
+1. **كنص** مباشرة داخل وسم JSX: `<h1>{name}'s قائمة المهام</h1>` يعمل، ولكن `<{tag}>قائمة المهام لـ Gregorio Y. Zara</{tag}>` لن يعمل.
+2. **كخصائص** تأتي فورًا بعد علامة `=`: `src={avatar}` ستقرأ قيمة المتغير `avatar`، ولكن `src="{avatar}"` ستمرر `"{avatar}"` في صورة string.
 
 ## Using "double curlies": CSS and other objects in JSX {/*using-double-curlies-css-and-other-objects-in-jsx*/}
 

From ea43001c0e4db5d3654cb27d05b00e29b7d7b71c Mon Sep 17 00:00:00 2001
From: Eihab Khan <mastereihab@gmail.com>
Date: Tue, 20 Jun 2023 16:59:13 +0100
Subject: [PATCH 05/13] translate 'double curlies' section

---
 .../learn/javascript-in-jsx-with-curly-braces.md   | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

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 edf9accbb..8def8234a 100644
--- a/src/content/learn/javascript-in-jsx-with-curly-braces.md
+++ b/src/content/learn/javascript-in-jsx-with-curly-braces.md
@@ -117,11 +117,11 @@ export default function TodoList() {
 1. **كنص** مباشرة داخل وسم JSX: `<h1>{name}'s قائمة المهام</h1>` يعمل، ولكن `<{tag}>قائمة المهام لـ Gregorio Y. Zara</{tag}>` لن يعمل.
 2. **كخصائص** تأتي فورًا بعد علامة `=`: `src={avatar}` ستقرأ قيمة المتغير `avatar`، ولكن `src="{avatar}"` ستمرر `"{avatar}"` في صورة string.
 
-## Using "double curlies": CSS and other objects in JSX {/*using-double-curlies-css-and-other-objects-in-jsx*/}
+## استخدام "أقواس معقوفة مزدوجة": CSS وكائنات أخرى داخل JSX {/*using-double-curlies-css-and-other-objects-in-jsx*/}
 
-In addition to strings, numbers, and other JavaScript expressions, you can even pass objects in JSX. Objects are also denoted with curly braces, like `{ name: "Hedy Lamarr", inventions: 5 }`. Therefore, to pass a JS object in JSX, you must wrap the object in another pair of curly braces: `person={{ name: "Hedy Lamarr", inventions: 5 }}`.
+بالإضافة إلى strings والأرقام وتعابير JavaScript الأخرى، يمكنك تمرير الكائنات في JSX. يتم تمييز الكائنات أيضًا بواسطة الأقواس المعقوفة، مثل `{ name: "Hedy Lamarr", inventions: 5 }`. لذلك، لتمرير كائن JavaScript في JSX، يجب عليك إحاطة الكائن بزوج آخر من الأقواس المعقوفة: `person={{ name: "Hedy Lamarr", inventions: 5 }}`.
 
-You may see this with inline CSS styles in JSX. React does not require you to use inline styles (CSS classes work great for most cases). But when you need an inline style, you pass an object to the `style` attribute:
+قد ترى ذلك في أنماط CSS المضمنة في JSX. React لا تتطلب منك استخدام أنماط CSS مضمنة (صنف CSS يعمل جيداً في معظم الحالات). ولكن عندما تحتاج إلى أسلوب مضمن، يمكنك تمرير كائن إلى خاصية `style`:
 
 <Sandpack>
 
@@ -147,9 +147,9 @@ ul { padding: 20px 20px 20px 40px; margin: 0; }
 
 </Sandpack>
 
-Try changing the values of `backgroundColor` and `color`.
+حاول تغيير قيم `backgroundColor` و `color`.
 
-You can really see the JavaScript object inside the curly braces when you write it like this:
+يمكنك رؤية كائن JavaScript بوضوح داخل الأقواس المعقوفة عندما تكتبه بهذه الطريقة:
 
 ```js {2-5}
 <ul style={
@@ -160,11 +160,11 @@ You can really see the JavaScript object inside the curly braces when you write
 }>
 ```
 
-The next time you see `{{` and `}}` in JSX, know that it's nothing more than an object inside the JSX curlies!
+في المرة القادمة التي ترى `{{` و `}}` في JSX، أعلم أنه ليس سوى كائن داخل أقواس JSX المعقوفة!
 
 <Pitfall>
 
-Inline `style` properties are written in camelCase. For example, HTML `<ul style="background-color: black">` would be written as `<ul style={{ backgroundColor: 'black' }}>`  in your component.
+خصائص `style` المضمنة تكتب بتنسيق camelCase. على سبيل المثال، عنصر HTML `<ul style="background-color: black">` يتم كتابته في المكون الخاص بك على النحو التالي: `<ul style={{ backgroundColor: 'black' }}>`.
 
 </Pitfall>
 

From b8eb684e9d705ea0faa97ed48d5e3ce2b5be0e07 Mon Sep 17 00:00:00 2001
From: Eihab Khan <mastereihab@gmail.com>
Date: Tue, 20 Jun 2023 17:57:08 +0100
Subject: [PATCH 06/13] translate 'more fun' section

---
 .../learn/javascript-in-jsx-with-curly-braces.md       | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

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 8def8234a..dab6da8b6 100644
--- a/src/content/learn/javascript-in-jsx-with-curly-braces.md
+++ b/src/content/learn/javascript-in-jsx-with-curly-braces.md
@@ -168,9 +168,9 @@ ul { padding: 20px 20px 20px 40px; margin: 0; }
 
 </Pitfall>
 
-## More fun with JavaScript objects and curly braces {/*more-fun-with-javascript-objects-and-curly-braces*/}
+## المزيد من المرح مع كائنات JavaScript والأقواس المعقوفة! {/*more-fun-with-javascript-objects-and-curly-braces*/}
 
-You can move several expressions into one object, and reference them in your JSX inside curly braces:
+يمكنك دمج العديد من التعابير في كائن واحد والإشارة لهم في JSX الخاص بك داخل الأقواس المعقوفة:
 
 <Sandpack>
 
@@ -210,7 +210,7 @@ body > div > div { padding: 20px; }
 
 </Sandpack>
 
-In this example, the `person` JavaScript object contains a `name` string and a `theme` object:
+في هذا المثال، يحتوي كائن JavaScript `person` على string `name` وكائن `theme`:
 
 ```js
 const person = {
@@ -222,14 +222,14 @@ const person = {
 };
 ```
 
-The component can use these values from `person` like so:
+يمكن للمكوّن استخدام قيم من الكائن `person` كالتالي:
 
 ```js
 <div style={person.theme}>
   <h1>{person.name}'s Todos</h1>
 ```
 
-JSX is very minimal as a templating language because it lets you organize data and logic using JavaScript.
+JSX هي لغة قوالب بسيطة جدًا لأنها تسمح لك بتنظيم البيانات والمنطق باستخدام JavaScript.
 
 <Recap>
 

From 4f3b331efc13a5ce956bcbde478e7e87efb624b2 Mon Sep 17 00:00:00 2001
From: Eihab Khan <mastereihab@gmail.com>
Date: Tue, 20 Jun 2023 18:28:52 +0100
Subject: [PATCH 07/13] translate 'recap' section

---
 .../learn/javascript-in-jsx-with-curly-braces.md       | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

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 dab6da8b6..d871a321d 100644
--- a/src/content/learn/javascript-in-jsx-with-curly-braces.md
+++ b/src/content/learn/javascript-in-jsx-with-curly-braces.md
@@ -233,12 +233,12 @@ JSX هي لغة قوالب بسيطة جدًا لأنها تسمح لك بتنظ
 
 <Recap>
 
-Now you know almost everything about JSX:
+الآن تعرف تقريبًا كل شيء عن JSX:
 
-* JSX attributes inside quotes are passed as strings.
-* Curly braces let you bring JavaScript logic and variables into your markup.
-* They work inside the JSX tag content or immediately after `=` in attributes.
-* `{{` and `}}` is not special syntax: it's a JavaScript object tucked inside JSX curly braces.
+* يتم تمرير خصائص JSX في شكل strings داخل أقواس تنصيص
+* تسمح لك الأقواس المعقوفة بإضافة منطق ومتغيرات JavaScript داخل الترميز الخاص بك.
+* تعمل الأقواس المعقوفة داخل محتوى وسم JSX أو مباشرة بعد `=` في الخصائص.
+* `{{` و `}}` ليست بصيغة خاصة: إنما هي كائن JavaScript موجود داخل أقواس JSX المعقوفة.
 
 </Recap>
 

From ab2a94bbb7fee396ec4e92eda97feb5b1d4b80a5 Mon Sep 17 00:00:00 2001
From: Eihab Khan <mastereihab@gmail.com>
Date: Tue, 20 Jun 2023 19:55:03 +0100
Subject: [PATCH 08/13] translate 'challenges' section

---
 .../javascript-in-jsx-with-curly-braces.md    | 40 +++++++++----------
 1 file changed, 20 insertions(+), 20 deletions(-)

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 d871a321d..21338157e 100644
--- a/src/content/learn/javascript-in-jsx-with-curly-braces.md
+++ b/src/content/learn/javascript-in-jsx-with-curly-braces.md
@@ -244,9 +244,9 @@ JSX هي لغة قوالب بسيطة جدًا لأنها تسمح لك بتنظ
 
 <Challenges>
 
-#### Fix the mistake {/*fix-the-mistake*/}
+#### أصلح الخطأ {/*fix-the-mistake*/}
 
-This code crashes with an error saying `Objects are not valid as a React child`:
+هذا الكود يتعطل ويظهر خطأ  `Objects are not valid as a React child`:
 
 <Sandpack>
 
@@ -286,15 +286,15 @@ body > div > div { padding: 20px; }
 
 </Sandpack>
 
-Can you find the problem?
+هل يمكنك إيجاد المشكلة؟
 
-<Hint>Look for what's inside the curly braces. Are we putting the right thing there?</Hint>
+<Hint>ابحث عن ما يوجد داخل الأقواس المجعدة. هل يتم وضع الشيء الصحيح هناك؟</Hint>
 
 <Solution>
 
-This is happening because this example renders *an object itself* into the markup rather than a string: `<h1>{person}'s Todos</h1>` is trying to render the entire `person` object! Including raw objects as text content throws an error because React doesn't know how you want to display them.
+يحدث هذا بسبب أن هذا المثال يقوم بتصيير *كائن بذاته* في الترميز بدلاً من string: `<h1>{person}'s قائمة المهام</h1>` يحاول عرض كائن `person` بأكمله! إدراج الكائنات المباشرة كمحتوى نصي يُثير خطأ لأن React لا يعرف كيف ترغب في عرضها.
 
-To fix it, replace `<h1>{person}'s Todos</h1>` with `<h1>{person.name}'s Todos</h1>`:
+لحل هذه المشكلة، قم بتبديل `<h1>{person}'s Todos</h1>` بـ `<h1>{person.name}'s Todos</h1>`:
 
 <Sandpack>
 
@@ -336,9 +336,9 @@ body > div > div { padding: 20px; }
 
 </Solution>
 
-#### Extract information into an object {/*extract-information-into-an-object*/}
+#### استخرج المعلومات إلى كائن {/*extract-information-into-an-object*/}
 
-Extract the image URL into the `person` object.
+استخرج عنوان URL للصورة إلى كائن `person`.
 
 <Sandpack>
 
@@ -380,7 +380,7 @@ body > div > div { padding: 20px; }
 
 <Solution>
 
-Move the image URL into a property called `person.imageUrl` and read it from the `<img>` tag using the curlies:
+قم بنقل عنوان URL للصورة إلى خاصية تسمى `person.imageUrl` وقم بقراءتها من وسم `<img>` باستخدام الأقواس المعقوفة:
 
 <Sandpack>
 
@@ -423,13 +423,13 @@ body > div > div { padding: 20px; }
 
 </Solution>
 
-#### Write an expression inside JSX curly braces {/*write-an-expression-inside-jsx-curly-braces*/}
+#### اكتب تعبيراً داخل أقواس JSX المعقوفة. {/*write-an-expression-inside-jsx-curly-braces*/}
 
-In the object below, the full image URL is split into four parts: base URL, `imageId`, `imageSize`, and file extension.
+في الكائن أدناه، يتم تقسيم العنوان الكامل للصورة إلى أربعة أجزاء: العنوان الأساس و`imageId` و`imageSize` وامتداد الملف.
 
-We want the image URL to combine these attributes together: base URL (always `'https://i.imgur.com/'`), `imageId` (`'7vQD0fP'`), `imageSize` (`'s'`), and file extension (always `'.jpg'`). However, something is wrong with how the `<img>` tag specifies its `src`.
+نريد أن يتم دمج عنوان URL للصورة باستخدام هذه الخصائص معًا: العنوان الأساس (دائمًا `'https://i.imgur.com/'`) و`imageId` (`'7vQD0fP'`) و `imageSize` (`'s'`)، وامتداد الملف (دائمًا `'.jpg'`). ومع ذلك، هناك خطأ في كيفية تحديد الوسم `<img>` لخاصية `src` الخاصة به.
 
-Can you fix it?
+هل يمكنك إصلاح الخطأ؟
 
 <Sandpack>
 
@@ -473,15 +473,15 @@ body > div > div { padding: 20px; }
 
 </Sandpack>
 
-To check that your fix worked, try changing the value of `imageSize` to `'b'`. The image should resize after your edit.
+للتحقق من نجاح حلك، جرب تغيير قيمة `imageSize` إلى `'b'`. يفترض أن يتغير حجم الصورة بعد تعديلك.
 
 <Solution>
 
-You can write it as `src={baseUrl + person.imageId + person.imageSize + '.jpg'}`.
+يمكنك كتابته على هذا النحو `src={baseUrl + person.imageId + person.imageSize + '.jpg'}`.
 
-1. `{` opens the JavaScript expression
-2. `baseUrl + person.imageId + person.imageSize + '.jpg'` produces the correct URL string
-3. `}` closes the JavaScript expression
+1. `{` تفتح التعبير الخاص بـ JavaScript
+2. `baseUrl + person.imageId + person.imageSize + '.jpg'` ينتج string URL الصحيح
+3. `{` تغلق التعبير الخاص بـ JavaScript
 
 <Sandpack>
 
@@ -524,7 +524,7 @@ body > div > div { padding: 20px; }
 
 </Sandpack>
 
-You can also move this expression into a separate function like `getImageUrl` below:
+يمكنك أيضًا نقل هذا التعبير إلى دالة منفصلة مثل `getImageUrl` في الأسفل:
 
 <Sandpack>
 
@@ -579,7 +579,7 @@ body > div > div { padding: 20px; }
 
 </Sandpack>
 
-Variables and functions can help you keep the markup simple!
+المتغيرات والدوال يمكنها مساعدتك في إبقاء الترميز بسيط!
 
 </Solution>
 

From 14d27ab7e34780b31566ac2b23e5426751b1e3f8 Mon Sep 17 00:00:00 2001
From: Eihab Khan <mastereihab@gmail.com>
Date: Tue, 20 Jun 2023 19:58:07 +0100
Subject: [PATCH 09/13] remove temporary rtl styles

---
 src/components/Layout/Page.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/Layout/Page.tsx b/src/components/Layout/Page.tsx
index 7bf5f636f..967a7fafc 100644
--- a/src/components/Layout/Page.tsx
+++ b/src/components/Layout/Page.tsx
@@ -135,7 +135,6 @@ 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}

From 03f0f68fe070f67c8bf96d8d8be6abf38b10ef1d Mon Sep 17 00:00:00 2001
From: Ahmed Abdelbaset <A7med3bdulBaset@gmail.com>
Date: Wed, 21 Jun 2023 16:31:43 +0300
Subject: [PATCH 10/13] from line 1 to line 230

---
 .../javascript-in-jsx-with-curly-braces.md    | 64 +++++++++----------
 1 file changed, 32 insertions(+), 32 deletions(-)

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 21338157e..e1f599428 100644
--- a/src/content/learn/javascript-in-jsx-with-curly-braces.md
+++ b/src/content/learn/javascript-in-jsx-with-curly-braces.md
@@ -1,25 +1,25 @@
 ---
-title: JavaScript في JSX باستخدام الأقواس المعقوفة
+title: JavaScript في JSX باستخدام الأقواس المنحنية
 ---
 
 <Intro>
 
- تتيح لك JSX كتابة ترميز شبيه بـ HTML داخل ملف JavaScript، مما يسمح بالحفاظ على منطق التصيير والمحتوى في المكان نفسه. في بعض الأحيان، قد ترغب في إضافة بعض منطق لغة JavaScript أو الإشارة إلى خاصية ديناميكية داخل هذا الترميز. في هذه الحالة، يمكنك استخدام الأقواس المعقوفة داخل JSX الخاص بك لفتح نافذة للغة JavaScript.
+ تتيح لك JSX كتابة ترميز شبيه بـ HTML داخل ملف JavaScript، مما يسمح بالحفاظ على منطق التصيير والمحتوى في المكان نفسه. في بعض الأحيان، قد ترغب في إضافة بعض منطق لغة JavaScript أو الإشارة إلى خاصية ديناميكية داخل هذا الترميز. في هذه الحالة، يمكنك استخدام الأقواس المنحنية داخل JSX الخاص بك لفتح نافذة للغة JavaScript.
 
 </Intro>
 
 <YouWillLearn>
 
-* كيفية تمرير strings باستخدام علامات التنصيص
+* كيفية تمرير النصوص (string) باستخدام علامات التنصيص
 * كيفية الإشارة إلى متغير JavaScript داخل JSX باستخدام الأقواس المعقوفة
-* كيفية استدعاء دالة JavaScript داخل JSX باستخدام الأقواس المعقوفة
+* كيفية استدعاء دالة JavaScript داخل JSX باستخدام الأقواس المنحنية
 * كيفية استخدام كائن JavaScript داخل JSX باستخدام الأقواس المعقوفة
 
 </YouWillLearn>
 
-## تمرير strings باستخدام علامات التنصيص {/*passing-strings-with-quotes*/}
+## تمرير النصوص باستخدام علامات التنصيص {/*passing-strings-with-quotes*/}
 
-عندما ترغب في تمرير خاصية string إلى JSX، يتم وضعها بين علامات تنصيص مفردة أو مزدوجة:
+عندما ترغب في تمرير نص إلى JSX، يتم وضعها بين علامات تنصيص مفردة أو مزدوجة:
 
 <Sandpack>
 
@@ -41,7 +41,7 @@ export default function Avatar() {
 
 </Sandpack>
 
-هنا ، يتم تمرير `"https://i.imgur.com/7vQD0fPs.jpg"` و `"Gregorio Y. Zara"` في صورة strings.
+هنا، يتم تمرير `"https://i.imgur.com/7vQD0fPs.jpg"` و `"Gregorio Y. Zara"` كنصوص.
 
 ولكن ماذا لو كنت ترغب في تحديد `src` أو نص `alt` بشكل ديناميكي؟ يمكنك **استخدام قيمة من JavaScript عن طريق استبدال `"`و `"` بـ `{`و `}`**:
 
@@ -67,11 +67,11 @@ export default function Avatar() {
 
 </Sandpack>
 
-لاحظ الاختلاف بين `className="avatar"`، الذي يحدد اسم صنف CSS `"avatar"` الذي يجعل الصورة دائرية، و `src={avatar}` الذي يقرأ قيمة متغير JavaScript المسمى `avatar`. هذا لأن الأقواس المعقوفة تتيح لك العمل مع لغة JavaScript مباشرة داخل الترميز الخاصة بك!
+لاحظ الاختلاف بين `className="avatar"`، الذي يحدد اسم فئة CSS `"avatar"` الذي يجعل الصورة دائرية، و`src={avatar}` الذي يقرأ قيمة متغير JavaScript المسمى `avatar`. هذا لأن الأقواس المنحنية تتيح لك العمل مع لغة JavaScript مباشرة داخل الترميز الخاصة بك!
 
-## استخدام الأقواس المعقوفة: نافذة إلى عالم JavaScript {/*using-curly-braces-a-window-into-the-javascript-world*/}
+## استخدام الأقواس المنحنية: نافذة إلى عالم JavaScript {/*using-curly-braces-a-window-into-the-javascript-world*/}
 
-JSX هي طريقة خاصة لكتابة JavaScript. وهذا يعني أنه يمكن استخدام JavaScript داخلها - باستخدام الأقواس المعقوفة `{ }`. في المثال أدناه، يتم تعريف اسم للعالم، `name`، ثم يتم تضمينه بواسطة الأقواس المعقوفة داخل عنصر `<h1>`.
+JSX هي طريقة خاصة لكتابة JavaScript. وهذا يعني أنه يمكن استخدام JavaScript داخلها - باستخدام الأقواس المعقوفة `{ }`. في المثال أدناه، يتم تعريف اسم للعالِم، `name`، ثم يتم تضمينه بواسطة الأقواس المنحنية داخل عنصر `<h1>`.
 
 <Sandpack>
 
@@ -79,7 +79,7 @@ JSX هي طريقة خاصة لكتابة JavaScript. وهذا يعني أنه 
 export default function TodoList() {
   const name = 'Gregorio Y. Zara';
   return (
-    <h1>{name}'s To Do List</h1>
+    <h1>قائمة مهام {name}</h1>
   );
 }
 ```
@@ -103,25 +103,25 @@ function formatDate(date) {
 
 export default function TodoList() {
   return (
-    <h1>To Do List for {formatDate(today)}</h1>
+    <h1>قائمة مهام لـ {formatDate(today)}</h1>
   );
 }
 ```
 
 </Sandpack>
 
-### أين يجب استخدام الأقواس المعقوفة؟ {/*where-to-use-curly-braces*/}
+### أين يجب استخدام الأقواس المنحنية؟ {/*where-to-use-curly-braces*/}
 
-يمكنك استخدام الأقواس المعقوفة في JSX بطريقتين فقط:
+يمكنك استخدام الأقواس المنحنية في JSX بطريقتين فقط:
 
 1. **كنص** مباشرة داخل وسم JSX: `<h1>{name}'s قائمة المهام</h1>` يعمل، ولكن `<{tag}>قائمة المهام لـ Gregorio Y. Zara</{tag}>` لن يعمل.
-2. **كخصائص** تأتي فورًا بعد علامة `=`: `src={avatar}` ستقرأ قيمة المتغير `avatar`، ولكن `src="{avatar}"` ستمرر `"{avatar}"` في صورة string.
+2. **كخصائص** تأتي فورًا بعد علامة `=`: `src={avatar}` ستقرأ قيمة المتغير `avatar`، ولكن `src="{avatar}"` ستمرره `"{avatar}"` كنص.
 
-## استخدام "أقواس معقوفة مزدوجة": CSS وكائنات أخرى داخل JSX {/*using-double-curlies-css-and-other-objects-in-jsx*/}
+## استخدام "أقواس منحنية مزدوجة": CSS وكائنات أخرى داخل JSX {/*using-double-curlies-css-and-other-objects-in-jsx*/}
 
-بالإضافة إلى strings والأرقام وتعابير JavaScript الأخرى، يمكنك تمرير الكائنات في JSX. يتم تمييز الكائنات أيضًا بواسطة الأقواس المعقوفة، مثل `{ name: "Hedy Lamarr", inventions: 5 }`. لذلك، لتمرير كائن JavaScript في JSX، يجب عليك إحاطة الكائن بزوج آخر من الأقواس المعقوفة: `person={{ name: "Hedy Lamarr", inventions: 5 }}`.
+بالإضافة إلى النصوص والأرقام وتعابير JavaScript الأخرى، يمكنك تمرير الكائنات في JSX. يتم تمييز الكائنات أيضًا بواسطة الأقواس المنحنية، مثل `{ name: "Hedy Lamarr", inventions: 5 }`. لذلك، لتمرير كائن JavaScript في JSX، يجب عليك إحاطة الكائن بزوج آخر من الأقواس المنحنية: `person={{ name: "Hedy Lamarr", inventions: 5 }}`.
 
-قد ترى ذلك في أنماط CSS المضمنة في JSX. React لا تتطلب منك استخدام أنماط CSS مضمنة (صنف CSS يعمل جيداً في معظم الحالات). ولكن عندما تحتاج إلى أسلوب مضمن، يمكنك تمرير كائن إلى خاصية `style`:
+قد ترى ذلك في أنماط CSS المضمنة فيJSX. React لا تتطلب منك استخدام أنماط CSS مضمنة (فئة CSS يعمل جيداً في معظم الحالات). ولكن عندما تحتاج إلى أسلوب مضمن، يمكنك تمرير كائن إلى خاصية `style`:
 
 <Sandpack>
 
@@ -132,9 +132,9 @@ export default function TodoList() {
       backgroundColor: 'black',
       color: 'pink'
     }}>
-      <li>Improve the videophone</li>
-      <li>Prepare aeronautics lectures</li>
-      <li>Work on the alcohol-fuelled engine</li>
+      <li>تحسين الهاتف</li>
+      <li>تجهيز محاضرات عن الطيران</li>
+      <li>العمل على محرك بالوقود الكحولي</li>
     </ul>
   );
 }
@@ -149,7 +149,7 @@ ul { padding: 20px 20px 20px 40px; margin: 0; }
 
 حاول تغيير قيم `backgroundColor` و `color`.
 
-يمكنك رؤية كائن JavaScript بوضوح داخل الأقواس المعقوفة عندما تكتبه بهذه الطريقة:
+يمكنك رؤية كائن JavaScript بوضوح داخل الأقواس المنحنية عندما تكتبه بهذه الطريقة:
 
 ```js {2-5}
 <ul style={
@@ -160,17 +160,17 @@ ul { padding: 20px 20px 20px 40px; margin: 0; }
 }>
 ```
 
-في المرة القادمة التي ترى `{{` و `}}` في JSX، أعلم أنه ليس سوى كائن داخل أقواس JSX المعقوفة!
+في المرة القادمة التي ترى `{{` و `}}` في JSX، أعلم أنه ليس سوى كائن داخل أقواس JSX المنحنية!
 
 <Pitfall>
 
-خصائص `style` المضمنة تكتب بتنسيق camelCase. على سبيل المثال، عنصر HTML `<ul style="background-color: black">` يتم كتابته في المكون الخاص بك على النحو التالي: `<ul style={{ backgroundColor: 'black' }}>`.
+خصائص `style` المضمنة تكتب بتنسيق camelCase. على سبيل المثال، عنصرHTML `<ul style="background-color: black">` يتم كتابته في المكون الخاص بك على النحو التالي: `<ul style={{ backgroundColor: 'black' }}>`.
 
 </Pitfall>
 
-## المزيد من المرح مع كائنات JavaScript والأقواس المعقوفة! {/*more-fun-with-javascript-objects-and-curly-braces*/}
+## المزيد من المرح مع كائنات JavaScript والأقواس المنحنية! {/*more-fun-with-javascript-objects-and-curly-braces*/}
 
-يمكنك دمج العديد من التعابير في كائن واحد والإشارة لهم في JSX الخاص بك داخل الأقواس المعقوفة:
+يمكنك دمج العديد من التعابير في كائن واحد والإشارة لهم في JSX الخاص بك داخل الأقواس المنحنية:
 
 <Sandpack>
 
@@ -193,9 +193,9 @@ export default function TodoList() {
         alt="Gregorio Y. Zara"
       />
       <ul>
-        <li>Improve the videophone</li>
-        <li>Prepare aeronautics lectures</li>
-        <li>Work on the alcohol-fuelled engine</li>
+        <li>تحسين الهاتف</li>
+        <li>تجهيز محاضرات عن الطيران</li>
+        <li>العمل على محرك بالوقود الكحولي</li>
       </ul>
     </div>
   );
@@ -210,7 +210,7 @@ body > div > div { padding: 20px; }
 
 </Sandpack>
 
-في هذا المثال، يحتوي كائن JavaScript `person` على string `name` وكائن `theme`:
+في هذا المثال، يحتوي كائنJavaScript `person` على نص `name` وكائن `theme`:
 
 ```js
 const person = {
@@ -226,10 +226,10 @@ const person = {
 
 ```js
 <div style={person.theme}>
-  <h1>{person.name}'s Todos</h1>
+  <h1>قائمة مهام {person.name}</h1>
 ```
 
-JSX هي لغة قوالب بسيطة جدًا لأنها تسمح لك بتنظيم البيانات والمنطق باستخدام JavaScript.
+JSXهي لغة قوالب بسيطة جدًا لأنها تسمح لك بتنظيم البيانات والمنطق باستخدام JavaScript.
 
 <Recap>
 

From e3bd1882180fed00e5e86ec598b1a6b0ac07a239 Mon Sep 17 00:00:00 2001
From: Ahmed Abdelbaset <A7med3bdulBaset@gmail.com>
Date: Wed, 21 Jun 2023 16:43:19 +0300
Subject: [PATCH 11/13] from 230 to 587

---
 .../javascript-in-jsx-with-curly-braces.md    | 64 +++++++++----------
 1 file changed, 32 insertions(+), 32 deletions(-)

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 e1f599428..60b84e8b8 100644
--- a/src/content/learn/javascript-in-jsx-with-curly-braces.md
+++ b/src/content/learn/javascript-in-jsx-with-curly-braces.md
@@ -235,10 +235,10 @@ JSXهي لغة قوالب بسيطة جدًا لأنها تسمح لك بتنظ
 
 الآن تعرف تقريبًا كل شيء عن JSX:
 
-* يتم تمرير خصائص JSX في شكل strings داخل أقواس تنصيص
-* تسمح لك الأقواس المعقوفة بإضافة منطق ومتغيرات JavaScript داخل الترميز الخاص بك.
-* تعمل الأقواس المعقوفة داخل محتوى وسم JSX أو مباشرة بعد `=` في الخصائص.
-* `{{` و `}}` ليست بصيغة خاصة: إنما هي كائن JavaScript موجود داخل أقواس JSX المعقوفة.
+* يتم تمرير خصائص JSX كنصوص داخل أقواس تنصيص
+* تسمح لك الأقواس المنحنية بإضافة منطق ومتغيرات JavaScript داخل الترميز الخاص بك.
+* تعمل الأقواس المنحنية داخل محتوى وسم JSX أو مباشرة بعد `=` في الخصائص.
+* `{{` و `}}` ليست صيغة خاصة: إنما هي كائن JavaScript موجود داخل أقواس JSX المنحنية.
 
 </Recap>
 
@@ -246,7 +246,7 @@ JSXهي لغة قوالب بسيطة جدًا لأنها تسمح لك بتنظ
 
 #### أصلح الخطأ {/*fix-the-mistake*/}
 
-هذا الكود يتعطل ويظهر خطأ  `Objects are not valid as a React child`:
+هذا الكود يتعطل ويظهر خطأ `Objects are not valid as a React child`:
 
 <Sandpack>
 
@@ -269,9 +269,9 @@ export default function TodoList() {
         alt="Gregorio Y. Zara"
       />
       <ul>
-        <li>Improve the videophone</li>
-        <li>Prepare aeronautics lectures</li>
-        <li>Work on the alcohol-fuelled engine</li>
+        <li>تحسين الهاتف</li>
+        <li>تجهيز محاضرات عن الطيران</li>
+        <li>العمل على محرك بالوقود الكحولي</li>
       </ul>
     </div>
   );
@@ -288,13 +288,13 @@ body > div > div { padding: 20px; }
 
 هل يمكنك إيجاد المشكلة؟
 
-<Hint>ابحث عن ما يوجد داخل الأقواس المجعدة. هل يتم وضع الشيء الصحيح هناك؟</Hint>
+<Hint>ابحث عن ما يوجد داخل الأقواس المنحنية. هل يتم وضع الشيء الصحيح هناك؟</Hint>
 
 <Solution>
 
-يحدث هذا بسبب أن هذا المثال يقوم بتصيير *كائن بذاته* في الترميز بدلاً من string: `<h1>{person}'s قائمة المهام</h1>` يحاول عرض كائن `person` بأكمله! إدراج الكائنات المباشرة كمحتوى نصي يُثير خطأ لأن React لا يعرف كيف ترغب في عرضها.
+يحدث هذا بسبب أن هذا المثال يقوم بتصيير *كائن بذاته* في الترميز بدلاً من النص: `<h1>قائمة مهام {person}</h1>` يحاول عرض كائن `person` بأكمله! إدراج الكائنات المباشرة كمحتوى نصي يُثير خطأ لأن React لا يعرف كيف ترغب في عرضها.
 
-لحل هذه المشكلة، قم بتبديل `<h1>{person}'s Todos</h1>` بـ `<h1>{person.name}'s Todos</h1>`:
+لحل هذه المشكلة، قم بتبديل `<h1>قائمة مهام {person}</h1>` بـ `<h1>قائمة مهام {person.name}</h1>`:
 
 <Sandpack>
 
@@ -317,9 +317,9 @@ export default function TodoList() {
         alt="Gregorio Y. Zara"
       />
       <ul>
-        <li>Improve the videophone</li>
-        <li>Prepare aeronautics lectures</li>
-        <li>Work on the alcohol-fuelled engine</li>
+        <li>تحسين الهاتف</li>
+        <li>تجهيز محاضرات عن الطيران</li>
+        <li>العمل على محرك بالوقود الكحولي</li>
       </ul>
     </div>
   );
@@ -361,9 +361,9 @@ export default function TodoList() {
         alt="Gregorio Y. Zara"
       />
       <ul>
-        <li>Improve the videophone</li>
-        <li>Prepare aeronautics lectures</li>
-        <li>Work on the alcohol-fuelled engine</li>
+        <li>تحسين الهاتف</li>
+        <li>تجهيز محاضرات عن الطيران</li>
+        <li>العمل على محرك بالوقود الكحولي</li>
       </ul>
     </div>
   );
@@ -380,7 +380,7 @@ body > div > div { padding: 20px; }
 
 <Solution>
 
-قم بنقل عنوان URL للصورة إلى خاصية تسمى `person.imageUrl` وقم بقراءتها من وسم `<img>` باستخدام الأقواس المعقوفة:
+قم بنقل عنوان URL للصورة إلى خاصية تسمى `person.imageUrl` وقم بقراءتها من وسم `<img>` باستخدام الأقواس المنحنية:
 
 <Sandpack>
 
@@ -404,9 +404,9 @@ export default function TodoList() {
         alt="Gregorio Y. Zara"
       />
       <ul>
-        <li>Improve the videophone</li>
-        <li>Prepare aeronautics lectures</li>
-        <li>Work on the alcohol-fuelled engine</li>
+        <li>تحسين الهاتف</li>
+        <li>تجهيز محاضرات عن الطيران</li>
+        <li>العمل على محرك بالوقود الكحولي</li>
       </ul>
     </div>
   );
@@ -423,7 +423,7 @@ body > div > div { padding: 20px; }
 
 </Solution>
 
-#### اكتب تعبيراً داخل أقواس JSX المعقوفة. {/*write-an-expression-inside-jsx-curly-braces*/}
+#### اكتب تعبيراً داخل أقواس JSX المنحنية. {/*write-an-expression-inside-jsx-curly-braces*/}
 
 في الكائن أدناه، يتم تقسيم العنوان الكامل للصورة إلى أربعة أجزاء: العنوان الأساس و`imageId` و`imageSize` وامتداد الملف.
 
@@ -456,9 +456,9 @@ export default function TodoList() {
         alt={person.name}
       />
       <ul>
-        <li>Improve the videophone</li>
-        <li>Prepare aeronautics lectures</li>
-        <li>Work on the alcohol-fuelled engine</li>
+        <li>تحسين الهاتف</li>
+        <li>تجهيز محاضرات عن الطيران</li>
+        <li>العمل على محرك بالوقود الكحولي</li>
       </ul>
     </div>
   );
@@ -480,7 +480,7 @@ body > div > div { padding: 20px; }
 يمكنك كتابته على هذا النحو `src={baseUrl + person.imageId + person.imageSize + '.jpg'}`.
 
 1. `{` تفتح التعبير الخاص بـ JavaScript
-2. `baseUrl + person.imageId + person.imageSize + '.jpg'` ينتج string URL الصحيح
+2. `baseUrl + person.imageId + person.imageSize + '.jpg'` ينتج نص URL الصحيح
 3. `{` تغلق التعبير الخاص بـ JavaScript
 
 <Sandpack>
@@ -507,9 +507,9 @@ export default function TodoList() {
         alt={person.name}
       />
       <ul>
-        <li>Improve the videophone</li>
-        <li>Prepare aeronautics lectures</li>
-        <li>Work on the alcohol-fuelled engine</li>
+        <li>تحسين الهاتف</li>
+        <li>تجهيز محاضرات عن الطيران</li>
+        <li>العمل على محرك بالوقود الكحولي</li>
       </ul>
     </div>
   );
@@ -551,9 +551,9 @@ export default function TodoList() {
         alt={person.name}
       />
       <ul>
-        <li>Improve the videophone</li>
-        <li>Prepare aeronautics lectures</li>
-        <li>Work on the alcohol-fuelled engine</li>
+        <li>تحسين الهاتف</li>
+        <li>تجهيز محاضرات عن الطيران</li>
+        <li>العمل على محرك بالوقود الكحولي</li>
       </ul>
     </div>
   );

From 41c081603d95bdb6780822a8e3394605fc69ac33 Mon Sep 17 00:00:00 2001
From: Ahmed Abdelbaset <A7med3bdulBaset@gmail.com>
Date: Wed, 21 Jun 2023 16:51:50 +0300
Subject: [PATCH 12/13] translate the name

---
 .../javascript-in-jsx-with-curly-braces.md    | 42 +++++++++----------
 1 file changed, 21 insertions(+), 21 deletions(-)

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 60b84e8b8..467eb6a1d 100644
--- a/src/content/learn/javascript-in-jsx-with-curly-braces.md
+++ b/src/content/learn/javascript-in-jsx-with-curly-braces.md
@@ -29,7 +29,7 @@ export default function Avatar() {
     <img
       className="avatar"
       src="https://i.imgur.com/7vQD0fPs.jpg"
-      alt="Gregorio Y. Zara"
+      alt="غريغوريو واي زارا"
     />
   );
 }
@@ -41,7 +41,7 @@ export default function Avatar() {
 
 </Sandpack>
 
-هنا، يتم تمرير `"https://i.imgur.com/7vQD0fPs.jpg"` و `"Gregorio Y. Zara"` كنصوص.
+هنا، يتم تمرير `"https://i.imgur.com/7vQD0fPs.jpg"` و `"غريغوريو واي زارا"` كنصوص.
 
 ولكن ماذا لو كنت ترغب في تحديد `src` أو نص `alt` بشكل ديناميكي؟ يمكنك **استخدام قيمة من JavaScript عن طريق استبدال `"`و `"` بـ `{`و `}`**:
 
@@ -50,7 +50,7 @@ export default function Avatar() {
 ```js
 export default function Avatar() {
   const avatar = 'https://i.imgur.com/7vQD0fPs.jpg';
-  const description = 'Gregorio Y. Zara';
+  const description = 'غريغوريو واي زارا';
   return (
     <img
       className="avatar"
@@ -77,7 +77,7 @@ JSX هي طريقة خاصة لكتابة JavaScript. وهذا يعني أنه 
 
 ```js
 export default function TodoList() {
-  const name = 'Gregorio Y. Zara';
+  const name = 'غريغوريو واي زارا';
   return (
     <h1>قائمة مهام {name}</h1>
   );
@@ -86,9 +86,9 @@ export default function TodoList() {
 
 </Sandpack>
 
-حاول تغيير قيمة `name` من `'Gregorio Y. Zara'` إلى `'Hedy Lamarr'`. لاحظ كيف يتغير عنوان القائمة؟
+حاول تغيير قيمة `name` من `'غريغوريو واي زارا'` إلى `'هايدي لامار'`. لاحظ كيف يتغير عنوان القائمة؟
 
-أي تعبير JavaScript سيعمل بين الأقواس المعقوفة، بما في ذلك استدعاءات الدوال مثل `formatDate()`:
+أي تعبير JavaScript سيعمل بين الأقواس المنحنية، بما في ذلك استدعاءات الدوال مثل `formatDate()`:
 <Sandpack>
 
 ```js
@@ -114,12 +114,12 @@ export default function TodoList() {
 
 يمكنك استخدام الأقواس المنحنية في JSX بطريقتين فقط:
 
-1. **كنص** مباشرة داخل وسم JSX: `<h1>{name}'s قائمة المهام</h1>` يعمل، ولكن `<{tag}>قائمة المهام لـ Gregorio Y. Zara</{tag}>` لن يعمل.
+1. **كنص** مباشرة داخل وسم JSX: `<h1>{name}'s قائمة المهام</h1>` يعمل، ولكن `<{tag}>قائمة المهام لـغريغوريو واي زارا </{tag}>` لن يعمل.
 2. **كخصائص** تأتي فورًا بعد علامة `=`: `src={avatar}` ستقرأ قيمة المتغير `avatar`، ولكن `src="{avatar}"` ستمرره `"{avatar}"` كنص.
 
 ## استخدام "أقواس منحنية مزدوجة": CSS وكائنات أخرى داخل JSX {/*using-double-curlies-css-and-other-objects-in-jsx*/}
 
-بالإضافة إلى النصوص والأرقام وتعابير JavaScript الأخرى، يمكنك تمرير الكائنات في JSX. يتم تمييز الكائنات أيضًا بواسطة الأقواس المنحنية، مثل `{ name: "Hedy Lamarr", inventions: 5 }`. لذلك، لتمرير كائن JavaScript في JSX، يجب عليك إحاطة الكائن بزوج آخر من الأقواس المنحنية: `person={{ name: "Hedy Lamarr", inventions: 5 }}`.
+بالإضافة إلى النصوص والأرقام وتعابير JavaScript الأخرى، يمكنك تمرير الكائنات في JSX. يتم تمييز الكائنات أيضًا بواسطة الأقواس المنحنية، مثل `{ name: "هايدي لامار", inventions: 5 }`. لذلك، لتمرير كائن JavaScript في JSX، يجب عليك إحاطة الكائن بزوج آخر من الأقواس المنحنية: `person={{ name: "هايدي لامار", inventions: 5 }}`.
 
 قد ترى ذلك في أنماط CSS المضمنة فيJSX. React لا تتطلب منك استخدام أنماط CSS مضمنة (فئة CSS يعمل جيداً في معظم الحالات). ولكن عندما تحتاج إلى أسلوب مضمن، يمكنك تمرير كائن إلى خاصية `style`:
 
@@ -176,7 +176,7 @@ ul { padding: 20px 20px 20px 40px; margin: 0; }
 
 ```js
 const person = {
-  name: 'Gregorio Y. Zara',
+  name: 'غريغوريو واي زارا',
   theme: {
     backgroundColor: 'black',
     color: 'pink'
@@ -190,7 +190,7 @@ export default function TodoList() {
       <img
         className="avatar"
         src="https://i.imgur.com/7vQD0fPs.jpg"
-        alt="Gregorio Y. Zara"
+        alt="غريغوريو واي زارا"
       />
       <ul>
         <li>تحسين الهاتف</li>
@@ -214,7 +214,7 @@ body > div > div { padding: 20px; }
 
 ```js
 const person = {
-  name: 'Gregorio Y. Zara',
+  name: 'غريغوريو واي زارا',
   theme: {
     backgroundColor: 'black',
     color: 'pink'
@@ -252,7 +252,7 @@ JSXهي لغة قوالب بسيطة جدًا لأنها تسمح لك بتنظ
 
 ```js
 const person = {
-  name: 'Gregorio Y. Zara',
+  name: 'غريغوريو واي زارا',
   theme: {
     backgroundColor: 'black',
     color: 'pink'
@@ -300,7 +300,7 @@ body > div > div { padding: 20px; }
 
 ```js
 const person = {
-  name: 'Gregorio Y. Zara',
+  name: 'غريغوريو واي زارا',
   theme: {
     backgroundColor: 'black',
     color: 'pink'
@@ -314,7 +314,7 @@ export default function TodoList() {
       <img
         className="avatar"
         src="https://i.imgur.com/7vQD0fPs.jpg"
-        alt="Gregorio Y. Zara"
+        alt="غريغوريو واي زارا"
       />
       <ul>
         <li>تحسين الهاتف</li>
@@ -344,7 +344,7 @@ body > div > div { padding: 20px; }
 
 ```js
 const person = {
-  name: 'Gregorio Y. Zara',
+  name: 'غريغوريو واي زارا',
   theme: {
     backgroundColor: 'black',
     color: 'pink'
@@ -358,7 +358,7 @@ export default function TodoList() {
       <img
         className="avatar"
         src="https://i.imgur.com/7vQD0fPs.jpg"
-        alt="Gregorio Y. Zara"
+        alt="غريغوريو واي زارا"
       />
       <ul>
         <li>تحسين الهاتف</li>
@@ -386,7 +386,7 @@ body > div > div { padding: 20px; }
 
 ```js
 const person = {
-  name: 'Gregorio Y. Zara',
+  name: 'غريغوريو واي زارا',
   imageUrl: "https://i.imgur.com/7vQD0fPs.jpg",
   theme: {
     backgroundColor: 'black',
@@ -401,7 +401,7 @@ export default function TodoList() {
       <img
         className="avatar"
         src={person.imageUrl}
-        alt="Gregorio Y. Zara"
+        alt="غريغوريو واي زارا"
       />
       <ul>
         <li>تحسين الهاتف</li>
@@ -437,7 +437,7 @@ body > div > div { padding: 20px; }
 
 const baseUrl = 'https://i.imgur.com/';
 const person = {
-  name: 'Gregorio Y. Zara',
+  name: 'غريغوريو واي زارا',
   imageId: '7vQD0fP',
   imageSize: 's',
   theme: {
@@ -488,7 +488,7 @@ body > div > div { padding: 20px; }
 ```js
 const baseUrl = 'https://i.imgur.com/';
 const person = {
-  name: 'Gregorio Y. Zara',
+  name: 'غريغوريو واي زارا',
   imageId: '7vQD0fP',
   imageSize: 's',
   theme: {
@@ -532,7 +532,7 @@ body > div > div { padding: 20px; }
 import { getImageUrl } from './utils.js'
 
 const person = {
-  name: 'Gregorio Y. Zara',
+  name: 'غريغوريو واي زارا',
   imageId: '7vQD0fP',
   imageSize: 's',
   theme: {

From 58c8f6822945b5dedd9095e5310625132cd2c978 Mon Sep 17 00:00:00 2001
From: Ahmed Abdelbaset <A7med3bdulBaset@gmail.com>
Date: Wed, 21 Jun 2023 16:53:58 +0300
Subject: [PATCH 13/13] Update sidebarLearn.json

---
 src/sidebarLearn.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/sidebarLearn.json b/src/sidebarLearn.json
index 0a72a757c..0c2702e86 100644
--- a/src/sidebarLearn.json
+++ b/src/sidebarLearn.json
@@ -64,7 +64,7 @@
           "path": "/learn/writing-markup-with-jsx"
         },
         {
-          "title": "JavaScript في JSX باستخدام الأقواس المعقوفة",
+          "title": "JavaScript في JSX باستخدام الأقواس المنحنية",
           "path": "/learn/javascript-in-jsx-with-curly-braces"
         },
         {