Add RTL to with-next-translate example (#22808)

### Arabic/Hebrew RTL to `with-next-translate` Example Added a simple example to change HTML direction based on the currently selected language ### References: - [#19049](#19049) - [#18667](#18667)
vercel · Mar 8, 2021 · 3f9c469 · 3f9c469
1 parent e861ada
commit 3f9c469
Show file tree

Hide file tree

Showing 8 changed files with 73 additions and 6 deletions.
diff --git a/examples/with-next-translate/i18n.json b/examples/with-next-translate/i18n.json
@@ -1,5 +1,5 @@
 {
-  "locales": ["en", "ca"],
+  "locales": ["en", "ca", "ar", "he"],
   "defaultLocale": "en",
   "pages": {
     "*": ["common"],

diff --git a/examples/with-next-translate/locales/ar/common.json b/examples/with-next-translate/locales/ar/common.json
@@ -0,0 +1,5 @@
+{
+  "title": "مثال with-next-translate",
+  "powered": "Powered by",
+  "alt": "Vercel logo"
+}
diff --git a/examples/with-next-translate/locales/ar/home.json b/examples/with-next-translate/locales/ar/home.json
@@ -0,0 +1,14 @@
+{
+  "arabic": "العربية",
+  "catalan": "الكاتالونية",
+  "change-arabic": "تغيير اللغة إلى العربية ",
+  "change-catalan": "تغيير اللغة إلى الكتالانية",
+  "change-english": "تغيير اللغة إلى اللغة الإنجليزية ",
+  "change-hebrew": "تغيير اللغة إلى العبرية",
+  "description": "ابدأ بالتعديل",
+  "english": "الإنجليزية",
+  "hebrew": "العبرية",
+  "next-docs": "اعثر على معلومات متعمقة حول ميزات Next.js وواجهة برمجة التطبيقات. ",
+  "plugin-docs": "اقرأ المزيد عن استخدام الترجمة التالية. ",
+  "title": "<0>مرحبا بك في  <1></1></0>"
+}
diff --git a/examples/with-next-translate/locales/ca/home.json b/examples/with-next-translate/locales/ca/home.json
@@ -1,9 +1,13 @@
 {
+  "arabic": "Àrab",
   "catalan": "Català",
+  "change-arabic": "Canvia a la versió en àrab",
   "change-catalan": "Canvia a la versió en català",
   "change-english": "Canvia a la versió en anglès",
+  "change-hebrew": "Canvieu a la versió hebrea",
   "description": "Comença editant",
   "english": "Anglès",
+  "hebrew": "Hebreu",
   "next-docs": "Troba informació detallada sobre l'API de Next.js.",
   "plugin-docs": "Llegeix més sobre com fer servir next-translate.",
   "title": "<0>Benvingut a <1></1></0>"

diff --git a/examples/with-next-translate/locales/en/home.json b/examples/with-next-translate/locales/en/home.json
@@ -1,9 +1,13 @@
 {
+  "arabic": "Arabic",
   "catalan": "Catalan",
+  "change-arabic": "Change language to Arabic",
   "change-catalan": "Change language to Catalan",
   "change-english": "Change language to English",
+  "change-hebrew": "Change language to Hebrew",
   "description": "Get started by editing",
   "english": "English",
+  "hebrew": "Hebrew",
   "next-docs": "Find in-depth information about Next.js features and API.",
   "plugin-docs": "Read more about next-translation usage.",
   "title": "<0>Welcome to <1></1></0>"

diff --git a/examples/with-next-translate/locales/he/common.json b/examples/with-next-translate/locales/he/common.json
@@ -0,0 +1,5 @@
+{
+  "title": "דוגמא with-next-translate",
+  "powered": "Powered by",
+  "alt": "Vercel logo"
+}
diff --git a/examples/with-next-translate/locales/he/home.json b/examples/with-next-translate/locales/he/home.json
@@ -0,0 +1,14 @@
+{
+  "arabic": "עֲרָבִית",
+  "catalan": "קטלאנית",
+  "change-arabic": "שנה שפה לערבית",
+  "change-catalan": "שנה שפה לקטלונית",
+  "change-english": "שנה שפה לאנגלית",
+  "change-hebrew": "שנה את השפה לעברית",
+  "description": "התחל על ידי עריכה",
+  "english": "אנגלית",
+  "hebrew": "עִברִית",
+  "next-docs": "מצא מידע מעמיק על התכונות וה- API של Next.js.",
+  "plugin-docs": "קרא עוד על השימוש בתרגום הבא.",
+  "title": "<0>ברוך הבא ל <1></1></0>"
+}
diff --git a/examples/with-next-translate/pages/index.js b/examples/with-next-translate/pages/index.js
@@ -4,11 +4,13 @@ import useTranslation from 'next-translate/useTranslation'
 import Layout from '../components/Layout'
 
 export default function Home() {
-  const { t } = useTranslation()
+  const { t, lang } = useTranslation()
+  const isRTL = lang === 'ar' || lang === 'he'
+  const arrow = isRTL ? String.fromCharCode(8592) : String.fromCharCode(8594)
 
   return (
     <Layout>
-      <main>
+      <main dir={isRTL ? 'rtl' : 'ltr'}>
         <Trans
           i18nKey="home:title"
           components={[
@@ -36,16 +38,30 @@ export default function Home() {
             </div>
           </Link>
 
+          <Link href="/" locale="ar">
+            <div className="card">
+              <h3>{t('home:arabic')}</h3>
+              <p>{t('home:change-arabic')}</p>
+            </div>
+          </Link>
+
+          <Link href="/" locale="he">
+            <div className="card">
+              <h3>{t('home:hebrew')}</h3>
+              <p>{t('home:change-hebrew')}</p>
+            </div>
+          </Link>
+
           <a href="https://nextjs.org/docs" className="card">
-            <h3>Next.js &rarr;</h3>
+            <h3>Next.{`js ${arrow}`}</h3>
             <p>{t('home:next-docs')}</p>
           </a>
 
           <a
             href="https://github.com/vinissimus/next-translate"
             className="card"
           >
-            <h3>Learn &rarr;</h3>
+            <h3>{`Learn ${arrow}`}</h3>
             <p>{t('home:plugin-docs')}</p>
           </a>
         </div>
@@ -119,8 +135,9 @@ export default function Home() {
         }
 
         .card h3 {
-          margin: 0 0 1rem 0;
+          display: flex;
           font-size: 1.5rem;
+          margin: 0 0 1rem 0;
         }
 
         .card p {
@@ -129,6 +146,10 @@ export default function Home() {
           line-height: 1.5;
         }
 
+        [dir='rtl'] p {
+          text-align: right;
+        }
+
         @media (max-width: 600px) {
           .grid {
             width: 100%;