فرانت‌اند: نسخه انگلیسی با مسیر /en/ — مسیریابی دوزبانه، دیکشنری رابط، بومی‌سازی داده، تغییر زبان در هدر، ویرایش انگلیسی در پنل و پشتیبانی LTR

frontend/src/components/home/Stats.tsx

@@ -1,15 +1,13 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { useInView } from 'framer-motion';
 import { useSite } from '../../api';
+import { useLang, formatNumber } from '../../i18n/lang';
 import { useFieldSaver } from '../../admin/AdminContext';
 import { AddItemButton, EditableItem } from '../../admin/Editable';
 import { InlineEdit } from '../admin/InlineEdit';
 
-function toFa(n: number) {
-  return n.toLocaleString('fa-IR');
-}
-
 function Counter({ value }: {value: number;}) {
+  const { lang } = useLang();
   const ref = useRef<HTMLSpanElement>(null);
   const inView = useInView(ref, { once: true, margin: '-60px' });
   const [display, setDisplay] = useState(0);
@@ -27,15 +25,16 @@ function Counter({ value }: {value: number;}) {
     return () => window.clearInterval(id);
   }, [inView, value]);
 
-  return <span ref={ref}>{toFa(display)}</span>;
+  return <span ref={ref}>{formatNumber(display, lang)}</span>;
 }
 
 export function Stats() {
   const { stats } = useSite();
+  const { t } = useLang();
   const save = useFieldSaver();
 
   return (
-    <section className="bg-char py-16" aria-label="آمار و ارقام">
+    <section className="bg-char py-16" aria-label={t('statsAria')}>
       <div className="mx-auto grid max-w-site grid-cols-2 gap-y-12 px-6 lg:grid-cols-4 lg:px-10">
         {stats.map((stat) =>
         <EditableItem key={stat.id} resource="stats" item={stat}>
@@ -48,7 +47,7 @@ export function Stats() {
                   const s = d.stats.find((x) => x.id === stat.id);
                   if (s) s.suffix = v;
                 })}
-                className="mr-1 text-2xl"
+                className="ltr:ml-1 rtl:mr-1 text-2xl"
               />
             </p>
             <p className="mt-3 text-sm font-light text-ivory/55">