diff options
| -rw-r--r-- | src/App.js | 19 | ||||
| -rw-r--r-- | src/components/Card.js | 12 | ||||
| -rw-r--r-- | src/i18n.js | 25 |
3 files changed, 51 insertions, 5 deletions
| @@ -5,8 +5,22 @@ import './style.css'; | |||
| 5 | import logo from '../src/images/wifi.png'; | 5 | import logo from '../src/images/wifi.png'; |
| 6 | 6 | ||
| 7 | function App() { | 7 | function App() { |
| 8 | const html = document.querySelector('html'); | ||
| 8 | const { t, i18n } = useTranslation(); | 9 | const { t, i18n } = useTranslation(); |
| 9 | 10 | ||
| 11 | const changeLanguage = (language) => { | ||
| 12 | if (language === 'fa-IR') { | ||
| 13 | html.style.direction = 'rtl'; | ||
| 14 | } else { | ||
| 15 | html.style.direction = 'ltr'; | ||
| 16 | } | ||
| 17 | i18n.changeLanguage(language); | ||
| 18 | }; | ||
| 19 | |||
| 20 | if (i18n.language === 'fa-IR') { | ||
| 21 | html.style.direction = 'rtl'; | ||
| 22 | } | ||
| 23 | |||
| 10 | return ( | 24 | return ( |
| 11 | <div className="App"> | 25 | <div className="App"> |
| 12 | <h1> | 26 | <h1> |
| @@ -18,7 +32,7 @@ function App() { | |||
| 18 | <label>{t('select')}</label> | 32 | <label>{t('select')}</label> |
| 19 | <select | 33 | <select |
| 20 | value={i18n.language} | 34 | value={i18n.language} |
| 21 | onChange={(e) => i18n.changeLanguage(e.target.value)} | 35 | onChange={(e) => changeLanguage(e.target.value)} |
| 22 | > | 36 | > |
| 23 | <option value="en-US">en-US</option> | 37 | <option value="en-US">en-US</option> |
| 24 | <option value="zh-HK">繁體中文🇭🇰</option> | 38 | <option value="zh-HK">繁體中文🇭🇰</option> |
| @@ -26,6 +40,7 @@ function App() { | |||
| 26 | <option value="es">es</option> | 40 | <option value="es">es</option> |
| 27 | <option value="pt">Português</option> | 41 | <option value="pt">Português</option> |
| 28 | <option value="ja">日本語</option> | 42 | <option value="ja">日本語</option> |
| 43 | <option value="fa-IR">Persian</option> | ||
| 29 | <option value="ru-RU">Русский</option> | 44 | <option value="ru-RU">Русский</option> |
| 30 | <option value="uk-UA">Українська</option> | 45 | <option value="uk-UA">Українська</option> |
| 31 | <option value="nl-NL">Nederlands</option> | 46 | <option value="nl-NL">Nederlands</option> |
| @@ -41,7 +56,7 @@ function App() { | |||
| 41 | <a href="https://github.com/bndw/wifi-card">{t('desc.source')}</a>. | 56 | <a href="https://github.com/bndw/wifi-card">{t('desc.source')}</a>. |
| 42 | </p> | 57 | </p> |
| 43 | 58 | ||
| 44 | <Card /> | 59 | <Card direction={i18n.language === 'fa-IR' ? 'rtl' : 'ltr'} /> |
| 45 | </div> | 60 | </div> |
| 46 | ); | 61 | ); |
| 47 | } | 62 | } |
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'; | |||
| 3 | import { useTranslation } from 'react-i18next'; | 3 | import { useTranslation } from 'react-i18next'; |
| 4 | import './style.css'; | 4 | import './style.css'; |
| 5 | 5 | ||
| 6 | export const Card = () => { | 6 | export const Card = ({ direction = 'ltr' }) => { |
| 7 | const firstLoad = useRef(true); | 7 | const firstLoad = useRef(true); |
| 8 | const [qrvalue, setQrvalue] = useState(''); | 8 | const [qrvalue, setQrvalue] = useState(''); |
| 9 | const [network, setNetwork] = useState({ | 9 | const [network, setNetwork] = useState({ |
| @@ -64,7 +64,7 @@ export const Card = () => { | |||
| 64 | id="print-area" | 64 | id="print-area" |
| 65 | style={{ maxWidth: portrait ? '350px' : '100%' }} | 65 | style={{ maxWidth: portrait ? '350px' : '100%' }} |
| 66 | > | 66 | > |
| 67 | <h1 style={{ textAlign: portrait ? 'center' : 'left' }}> | 67 | <h1 style={{ textAlign: portrait ? 'center' : 'unset' }}> |
| 68 | {t('wifi.login')} | 68 | {t('wifi.login')} |
| 69 | </h1> | 69 | </h1> |
| 70 | 70 | ||
| @@ -74,7 +74,13 @@ export const Card = () => { | |||
| 74 | > | 74 | > |
| 75 | <QRCode | 75 | <QRCode |
| 76 | className="qrcode" | 76 | className="qrcode" |
| 77 | style={{ paddingRight: portrait ? '' : '1em' }} | 77 | style={ |
| 78 | !portrait | ||
| 79 | ? direction === 'ltr' | ||
| 80 | ? { paddingRight: '1em' } | ||
| 81 | : { paddingLeft: '1em' } | ||
| 82 | : {} | ||
| 83 | } | ||
| 78 | value={qrvalue} | 84 | value={qrvalue} |
| 79 | size={175} | 85 | size={175} |
| 80 | /> | 86 | /> |
diff --git a/src/i18n.js b/src/i18n.js index c6e7a06..fcb3ff9 100644 --- a/src/i18n.js +++ b/src/i18n.js | |||
| @@ -209,6 +209,31 @@ const resources = { | |||
| 209 | select: 'Выбор языка', | 209 | select: 'Выбор языка', |
| 210 | }, | 210 | }, |
| 211 | }, | 211 | }, |
| 212 | 'fa-IR': { | ||
| 213 | translation: { | ||
| 214 | title: 'کارت WiFi', | ||
| 215 | 'desc.use': | ||
| 216 | 'توسط اطلاعات شبکه WiFi خود یک کارت ساده چاپ کنید و آن را به یخچال بچسبانید و یا در کیف پول خود نگه دارید.', | ||
| 217 | 'desc.privacy': | ||
| 218 | 'اطلاعات شبکه شما هرگز به سرور ارسال نمیشود و هیچگونه ردیابی، آنالیز و یا تحلیل در این وب سایت انجام نمیشود. مشاهده ', | ||
| 219 | 'desc.source': 'سورس کد', | ||
| 220 | 'wifi.login': 'اتصال به شبکه WiFi', | ||
| 221 | 'wifi.name': 'نام شبکه', | ||
| 222 | 'wifi.name.placeholder': 'نام شبکه خود را وارد کنید', | ||
| 223 | 'wifi.password': 'رمزعبور', | ||
| 224 | 'wifi.password.placeholder': 'رمزعبور شبکه خود را وارد کنید', | ||
| 225 | 'wifi.password.hide': 'رمزعبور را بعد از چاپ کارت مخفی کن.', | ||
| 226 | 'wifi.password.encryption': 'رمزنگاری', | ||
| 227 | 'wifi.tip': | ||
| 228 | 'دوربین تلفن خود را روی تصویر (QR Code) گرفته تا به صورت خودکار به شبکه متصل شوید.', | ||
| 229 | 'wifi.alert.name': 'اسم شبکه شما نباید خالی باشد.', | ||
| 230 | 'wifi.alert.password.length.5': 'رمزعبور باید حداقل ۵ حرف داشته باشد.', | ||
| 231 | 'wifi.alert.password.8': 'رمزعبور باید حداقل ۸ حرف داشته باشد.', | ||
| 232 | 'button.rotate': 'چرخاندن', | ||
| 233 | 'button.print': 'چاپ', | ||
| 234 | select: 'انتخاب زبان', | ||
| 235 | }, | ||
| 236 | }, | ||
| 212 | 'uk-UA': { | 237 | 'uk-UA': { |
| 213 | translation: { | 238 | translation: { |
| 214 | title: 'Карта WiFi', | 239 | title: 'Карта WiFi', |
