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, 9 insertions, 3 deletions

diff --git a/src/components/Card.js b/src/components/Card.js
index 298f968..bcb7acc 100644
--- a/src/components/Card.js
+++ b/src/components/Card.js
@@ -3,7 +3,7 @@ import { useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import './style.css';
 
-export const Card = () => {
+export const Card = ({ direction = 'ltr' }) => {
   const firstLoad = useRef(true);
   const [qrvalue, setQrvalue] = useState('');
   const [network, setNetwork] = useState({
@@ -64,7 +64,7 @@ export const Card = () => {
         id="print-area"
         style={{ maxWidth: portrait ? '350px' : '100%' }}
       >
-        <h1 style={{ textAlign: portrait ? 'center' : 'left' }}>
+        <h1 style={{ textAlign: portrait ? 'center' : 'unset' }}>
           {t('wifi.login')}
         </h1>
 
@@ -74,7 +74,13 @@ export const Card = () => {
         >
           <QRCode
             className="qrcode"
-            style={{ paddingRight: portrait ? '' : '1em' }}
+            style={
+              !portrait
+                ? direction === 'ltr'
+                  ? { paddingRight: '1em' }
+                  : { paddingLeft: '1em' }
+                : {}
+            }
             value={qrvalue}
             size={175}
           />