[Done] translate components

src/components/CodeEditor/CodeEditor.js

@@ -62,12 +62,11 @@ class CodeEditor extends Component {
     if (showBabelErrorMessage) {
       errorMessage = (
         <span>
-          Babel could not be loaded.
+          لم يتم تحميل Babel
           <br />
           <br />
-          This can be caused by an ad blocker. If you're using one, consider
-          adding reactjs.org to the whitelist so the live code examples will
-          work.
+          يمكن أن يحدث هذا بسبب تطبيقات منع الإعلانات. إن كنت تستعمل أحدها، أضف reactjs.org
+           إلى قائمة المواقع المسموح لها حتى تتمكن من تشغيل أمثلة الشيفرة البرمجية.
         </span>
       );
     } else if (error != null) {
@@ -77,7 +76,7 @@ class CodeEditor extends Component {
     return (
       <LiveProvider code={showJSX ? code : compiledES6} mountStylesheet={false}>
         <div
-          dir="ltr"
+          dir="rtl"
           css={{
             [media.greaterThan('medium')]: {
               display: 'flex',
@@ -106,11 +105,11 @@ class CodeEditor extends Component {
                 color: colors.white,
               }}>
               <MetaTitle onDark={true}>
-                Live JSX Editor
+                محرر JSX المباشر
                 <label
                   css={{
                     fontSize: 14,
-                    float: 'right',
+                    float: 'left',
                     cursor: 'pointer',
                   }}>
                   <input
@@ -120,7 +119,7 @@ class CodeEditor extends Component {
                     }
                     type="checkbox"
                   />{' '}
-                  JSX?
+                  JSX؟
                 </label>
               </MetaTitle>
             </div>
@@ -176,7 +175,7 @@ class CodeEditor extends Component {
                   cssProps={{
                     color: colors.white,
                   }}>
-                  Error
+                  خطأ
                 </MetaTitle>
               </div>
               <pre
@@ -207,7 +206,7 @@ class CodeEditor extends Component {
                   padding: '0 10px',
                   backgroundColor: colors.divider,
                 }}>
-                <MetaTitle>Result</MetaTitle>
+                <MetaTitle>النتيجة</MetaTitle>
               </div>
               <div
                 id={containerNodeID}

src/components/CodeExample/CodeExample.js

@@ -61,7 +61,7 @@ class CodeExample extends Component {
         {loaded ? (
           <CodeEditor code={code} containerNodeID={containerNodeID} />
         ) : (
-          <h4>Loading code example...</h4>
+          <h4>جاري تحميل مثال الشيفرة البرمجية...</h4>
         )}
       </div>
     );

src/components/ErrorDecoder/ErrorDecoder.js

@@ -69,16 +69,16 @@ function ErrorResult(props: {|code: ?string, msg: string|}) {
   if (!code) {
     return (
       <p>
-        When you encounter an error, you'll receive a link to this page for that
-        specific error and we'll show you the full error text.
+        عندما تُواجه خطأ ما، سيتمّ تحويلك إلى هذه الصفحة الخاصة بذلك الخطأ بالتحديد 
+        وسنعرض لك نص رسالة الخطأ بالكامل.
       </p>
     );
   }
 
   return (
     <div>
       <p>
-        <b>The full text of the error you just encountered is:</b>
+        <b>النص الكامل للخطأ الذي واجهته للتو هو:</b>
       </p>
       <code>
         <b>{urlify(errorMsg)}</b>

src/components/LayoutHeader/Header.js

@@ -179,7 +179,7 @@ const Header = ({location}: {location: Location}) => (
               },
             }}
             to="/versions">
-            اصدار {version}
+            إصدار {version}
           </Link>
           <Link
             css={{

src/components/LayoutHeader/SearchSvg.js

@@ -12,7 +12,7 @@ const SearchSvg = () => (
     height="16"
     xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 16 16">
-    <title>Search</title>
+    <title>بحث</title>
     <path
       d={`
         M6.02945,10.20327a4.17382,4.17382,0,1,1,4.17382-4.17382A4.15609,4.15609,