Translate various components and documentation to Arabic for improved accessibility and understanding

Author: Mohamed-Hashem

src/components/Layout/Feedback.tsx

@@ -74,7 +74,7 @@ function SendFeedback({onSubmit}: {onSubmit: () => void}) {
         {exit: isSubmitted}
       )}>
       <p className="w-full text-lg font-bold text-primary dark:text-primary-dark me-4">
-        {isSubmitted ? 'Thank you for your feedback!' : 'Is this page useful?'}
+        {isSubmitted ? 'شكراً لك على ملاحظاتك!' : 'هل هذه الصفحة مفيدة؟'}
       </p>
       {!isSubmitted && (
         <button

src/components/Layout/Sidebar/SidebarLink.tsx

@@ -85,26 +85,26 @@ export function SidebarLink({
         {title}{' '}
         {version === 'major' && (
           <span
-            title="- This feature is available in React 19 beta and the React canary channel"
+            title="- هذه الميزة متاحة في React 19 بيتا وقناة canary"
             className={`text-xs px-1 ms-1 rounded bg-gray-10 dark:bg-gray-40 dark:bg-opacity-20 text-gray-40 dark:text-gray-40`}>
             React 19
           </span>
         )}
         {version === 'canary' && (
           <IconCanary
-            title=" - This feature is available in the latest Canary version of React"
+            title=" - هذه الميزة متاحة في أحدث إصدار Canary من React"
             className="ms-1 text-gray-30 dark:text-gray-60 inline-block w-3.5 h-3.5 align-[-3px]"
           />
         )}
         {version === 'experimental' && (
           <IconExperimental
-            title=" - This feature is available in the latest Experimental version of React"
+            title=" - هذه الميزة متاحة في أحدث إصدار تجريبي من React"
             className="ms-1 text-gray-30 dark:text-gray-60 inline-block w-3.5 h-3.5 align-[-3px]"
           />
         )}
         {version === 'rc' && (
           <IconCanary
-            title=" - This feature is available in the latest RC version"
+            title=" - هذه الميزة متاحة في أحدث إصدار RC"
             className="ms-1 text-gray-30 dark:text-gray-60 inline-block w-3.5 h-3.5 align-[-3px]"
           />
         )}

src/components/Layout/TopNav/BrandMenu.tsx

@@ -57,23 +57,23 @@ export default function BrandMenu({children}: {children: React.ReactNode}) {
           sideOffset={0}
           align="end">
           <ContextMenu.Label className="ps-4 pt-2 text-base text-tertiary dark:text-tertiary-dark">
-            Dark Mode
+            الوضع الداكن
           </ContextMenu.Label>
           <DownloadMenuItem
             fileName="react_logo_dark.svg"
             href="/images/brand/logo_dark.svg">
             <span className="w-8">
               <IconDownload />
             </span>
-            <span>Logo SVG</span>
+            <span>شعار SVG</span>
           </DownloadMenuItem>
           <DownloadMenuItem
             fileName="react_wordmark_dark.svg"
             href="/images/brand/wordmark_dark.svg">
             <span className="w-8">
               <IconDownload />
             </span>
-            <span>Wordmark SVG</span>
+            <span>علامة كلمة SVG</span>
           </DownloadMenuItem>
           <MenuItem
             onSelect={async () => {
@@ -82,26 +82,26 @@ export default function BrandMenu({children}: {children: React.ReactNode}) {
             <span className="w-8">
               <IconCopy />
             </span>
-            <span>Copy dark mode color</span>
+            <span>نسخ لون الوضع الداكن</span>
           </MenuItem>
           <ContextMenu.Label className="ps-4 text-base text-tertiary dark:text-tertiary-dark">
-            Light Mode
+            الوضع الفاتح
           </ContextMenu.Label>
           <DownloadMenuItem
             fileName="react_logo_light.svg"
             href="/images/brand/logo_light.svg">
             <span className="w-8">
               <IconDownload />
             </span>
-            <span>Logo SVG</span>
+            <span>شعار SVG</span>
           </DownloadMenuItem>
           <DownloadMenuItem
             fileName="react_wordmark_light.svg"
             href="/images/brand/wordmark_light.svg">
             <span className="w-8">
               <IconDownload />
             </span>
-            <span>Wordmark SVG</span>
+            <span>علامة كلمة SVG</span>
           </DownloadMenuItem>
           <MenuItem
             onSelect={async () => {
@@ -110,7 +110,7 @@ export default function BrandMenu({children}: {children: React.ReactNode}) {
             <span className="w-8">
               <IconCopy />
             </span>
-            <span>Copy light mode color</span>
+            <span>نسخ لون الوضع الفاتح</span>
           </MenuItem>
           <div className="uwu-visible flex flex-col">
             <ContextMenu.Separator className="" />
@@ -125,13 +125,13 @@ export default function BrandMenu({children}: {children: React.ReactNode}) {
               <span className="w-8">
                 <IconClose />
               </span>
-              <span>Turn off</span>
+              <span>إيقاف</span>
             </MenuItem>
             <DownloadMenuItem fileName="react_uwu_png" href="/images/uwu.png">
               <span className="w-8">
                 <IconDownload />
               </span>
-              <span>Logo PNG</span>
+              <span>شعار PNG</span>
             </DownloadMenuItem>
 
             <ExternalLink
@@ -141,7 +141,7 @@ export default function BrandMenu({children}: {children: React.ReactNode}) {
                 <span className="w-8">
                   <IconNewPage />
                 </span>
-                <span>Logo by @sawaratsuki1004</span>
+                <span>الشعار من @sawaratsuki1004</span>
               </MenuItem>
             </ExternalLink>
           </div>

src/components/Layout/TopNav/TopNav.tsx

@@ -317,7 +317,7 @@ export default function TopNav({
                 )}
                 onClick={onOpenSearch}>
                 <IconSearch className="align-middle me-3 text-gray-30 shrink-0 group-betterhover:hover:text-gray-70" />
-                Search
+                بحث
                 <span className="hidden ms-auto sm:flex item-center me-1">
                   <Kbd data-platform="mac">⌘</Kbd>
                   <Kbd data-platform="win" wide>
@@ -330,18 +330,18 @@ export default function TopNav({
             <div className="text-base justify-center items-center gap-1.5 flex 3xl:flex-1 flex-row 3xl:justify-end">
               <div className="mx-2.5 gap-1.5 hidden lg:flex">
                 <NavItem isActive={section === 'learn'} url="/learn">
-                  Learn
+                  تعلم
                 </NavItem>
                 <NavItem
                   isActive={section === 'reference'}
                   url="/reference/react">
-                  Reference
+                  مرجع
                 </NavItem>
                 <NavItem isActive={section === 'community'} url="/community">
-                  Community
+                  المجتمع
                 </NavItem>
                 <NavItem isActive={section === 'blog'} url="/blog">
-                  Blog
+                  المدونة
                 </NavItem>
               </div>
               <div className="flex w-full md:hidden"></div>

src/components/PageHeading.tsx

@@ -42,19 +42,19 @@ function PageHeading({
           {title}
           {version === 'canary' && (
             <IconCanary
-              title=" - This feature is available in the latest Canary version of React"
+              title=" - هذه الميزة متاحة في أحدث إصدار Canary من React"
               className="ms-4 mt-1 text-gray-50 dark:text-gray-40 inline-block w-6 h-6 align-[-1px]"
             />
           )}
           {version === 'rc' && (
             <IconCanary
-              title=" - This feature is available in the latest RC version"
+              title=" - هذه الميزة متاحة في أحدث إصدار RC"
               className="ms-4 mt-1 text-gray-50 dark:text-gray-40 inline-block w-6 h-6 align-[-1px]"
             />
           )}
           {version === 'experimental' && (
             <IconExperimental
-              title=" - This feature is available in the latest Experimental version of React"
+              title=" - هذه الميزة متاحة في أحدث إصدار تجريبي من React"
               className="ms-4 mt-1 text-gray-50 dark:text-gray-40 inline-block w-6 h-6 align-[-1px]"
             />
           )}

src/components/Tag.tsx

@@ -14,23 +14,23 @@ import type {RouteTag} from './Layout/getRouteMeta';
 
 const variantMap = {
   foundation: {
-    name: 'Foundation',
+    name: 'أساسي',
     classes: 'bg-yellow-50 text-white',
   },
   intermediate: {
-    name: 'Intermediate',
+    name: 'متوسط',
     classes: 'bg-purple-40 text-white',
   },
   advanced: {
-    name: 'Advanced',
+    name: 'متقدم',
     classes: 'bg-green-40 text-white',
   },
   experimental: {
-    name: 'Experimental',
+    name: 'تجريبي',
     classes: 'bg-ui-orange text-white',
   },
   deprecated: {
-    name: 'Deprecated',
+    name: 'مهمل',
     classes: 'bg-red-40 text-white',
   },
 };

src/content/reference/react-compiler/panicThreshold.md

@@ -1,75 +1,76 @@
+````markdown
 ---
 title: panicThreshold
 ---
 
 <Intro>
 
-The `panicThreshold` option controls how the React Compiler handles errors during compilation.
+يتحكم خيار `panicThreshold` في كيفية تعامل React Compiler مع الأخطاء أثناء التجميع.
 
 </Intro>
 
 ```js
 {
-  panicThreshold: 'none' // Recommended
+  panicThreshold: 'none' // موصى به
 }
 ```
 
 <InlineToc />
 
 ---
 
-## Reference {/*reference*/}
+## المرجع {/*reference*/}
 
 ### `panicThreshold` {/*panicthreshold*/}
 
-Determines whether compilation errors should fail the build or skip optimization.
+يحدد ما إذا كان يجب أن تفشل أخطاء التجميع في البناء أو تخطي التحسين.
 
-#### Type {/*type*/}
+#### النوع {/*type*/}
 
 ```
 'none' | 'critical_errors' | 'all_errors'
 ```
 
-#### Default value {/*default-value*/}
+#### القيمة الافتراضية {/*default-value*/}
 
 `'none'`
 
-#### Options {/*options*/}
+#### الخيارات {/*options*/}
 
-- **`'none'`** (default, recommended): Skip components that can't be compiled and continue building
-- **`'critical_errors'`**: Fail the build only on critical compiler errors
-- **`'all_errors'`**: Fail the build on any compiler diagnostic
+- **`'none'`** (افتراضي، موصى به): تخطي المكونات التي لا يمكن تجميعها ومتابعة البناء
+- **`'critical_errors'`**: فشل البناء فقط عند أخطاء المُجمّع الحرجة
+- **`'all_errors'`**: فشل البناء عند أي تشخيص للمُجمّع
 
-#### Caveats {/*caveats*/}
+#### تنبيهات {/*caveats*/}
 
-- Production builds should always use `'none'`
-- Build failures prevent your application from building
-- The compiler automatically detects and skips problematic code with `'none'`
-- Higher thresholds are only useful during development for debugging
+- يجب أن تستخدم بيئات الإنتاج دائمًا `'none'`
+- فشل البناء يمنع تطبيقك من البناء
+- يكتشف المُجمّع تلقائيًا ويتخطى الكود الإشكالي مع `'none'`
+- العتبات الأعلى مفيدة فقط أثناء التطوير لتصحيح الأخطاء
 
 ---
 
-## Usage {/*usage*/}
+## الاستخدام {/*usage*/}
 
-### Production configuration (recommended) {/*production-configuration*/}
+### إعداد الإنتاج (موصى به) {/*production-configuration*/}
 
-For production builds, always use `'none'`. This is the default value:
+لبيئات الإنتاج، استخدم دائمًا `'none'`. هذه هي القيمة الافتراضية:
 
 ```js
 {
   panicThreshold: 'none'
 }
 ```
 
-This ensures:
-- Your build never fails due to compiler issues
-- Components that can't be optimized run normally
-- Maximum components get optimized
-- Stable production deployments
+يضمن هذا:
+- لن يفشل بناؤك أبدًا بسبب مشاكل المُجمّع
+- المكونات التي لا يمكن تحسينها تعمل بشكل طبيعي
+- الحد الأقصى من المكونات يتم تحسينها
+- نشر إنتاج مستقر
 
-### Development debugging {/*development-debugging*/}
+### تصحيح أخطاء التطوير {/*development-debugging*/}
 
-Temporarily use stricter thresholds to find issues:
+استخدم مؤقتًا عتبات أكثر صرامة للعثور على المشاكل:
 
 ```js
 const isDevelopment = process.env.NODE_ENV === 'development';
@@ -84,4 +85,5 @@ const isDevelopment = process.env.NODE_ENV === 'development';
     }
   }
 }
-```
+```
+````