Add RTL Direction & Persian Translation (#79)

* feat: add RTL direction and persian lang

* feat: init RTL direction

* fix: style issues

Co-authored-by: Ramin <r.rezaei@digikala.com>

1 files changed, 17 insertions, 2 deletions

diff --git a/src/App.js b/src/App.js
index d05f151..5fdb388 100644
--- a/src/App.js
+++ b/src/App.js
@@ -5,8 +5,22 @@ import './style.css';
 import logo from '../src/images/wifi.png';
 
 function App() {
+  const html = document.querySelector('html');
   const { t, i18n } = useTranslation();
 
+  const changeLanguage = (language) => {
+    if (language === 'fa-IR') {
+      html.style.direction = 'rtl';
+    } else {
+      html.style.direction = 'ltr';
+    }
+    i18n.changeLanguage(language);
+  };
+
+  if (i18n.language === 'fa-IR') {
+    html.style.direction = 'rtl';
+  }
+
   return (
     <div className="App">
       <h1>
@@ -18,7 +32,7 @@ function App() {
         <label>{t('select')}</label>
         <select
           value={i18n.language}
-          onChange={(e) => i18n.changeLanguage(e.target.value)}
+          onChange={(e) => changeLanguage(e.target.value)}
         >
           <option value="en-US">en-US</option>
           <option value="zh-HK">繁體中文🇭🇰</option>
@@ -26,6 +40,7 @@ function App() {
           <option value="es">es</option>
           <option value="pt">Português</option>
           <option value="ja">日本語</option>
+          <option value="fa-IR">Persian</option>
           <option value="ru-RU">Русский</option>
           <option value="uk-UA">Українська</option>
           <option value="nl-NL">Nederlands</option>
@@ -41,7 +56,7 @@ function App() {
         <a href="https://github.com/bndw/wifi-card">{t('desc.source')}</a>.
       </p>
 
-      <Card />
+      <Card direction={i18n.language === 'fa-IR' ? 'rtl' : 'ltr'} />
     </div>
   );
 }