i18n is added with EN/AR switch

package.json

@@ -8,9 +8,13 @@
     "@testing-library/user-event": "^7.2.1",
     "autoprefixer": "^9.8.0",
     "axios": "^0.19.2",
+    "i18next": "^19.4.4",
+    "i18next-browser-languagedetector": "^4.1.1",
+    "i18next-xhr-backend": "^3.2.2",
     "postcss-cli": "^7.1.1",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
+    "react-i18next": "^11.4.0",
     "react-router-dom": "^5.2.0",
     "react-scripts": "3.4.1",
     "tailwindcss": "^1.4.6"

src/assets/css/main.css

@@ -14299,6 +14299,10 @@ video {
 
 @import url('https://fonts.googleapis.com/css2?family=Philosopher:wght@400;700&display=swap');
 
+@import url('https://fonts.googleapis.com/css2?family=Markazi+Text:wght@400;500;600;700&display=swap');
+
+@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700&display=swap');
+
 /* Custom Styles */
 
 :root{
@@ -14319,7 +14323,7 @@ html, body{
   margin: 0;
   padding: 0;
   box-sizing: border-box;
-  font-family: "Jost", sans-serif;
+  font-family: 'Jost', 'Cairo', sans-serif;
 }
 
 button:focus {
@@ -14353,6 +14357,41 @@ footer{
   text-align: center;
 }
 
+/* since nested groupes are not supported we have to use 
+     regular css for the nested dropdowns 
+  */
+
+li>ul                 { transform: translatex(100%) scale(0)
+}
+
+li:hover>ul           { transform: translatex(101%) scale(1)
+}
+
+li > button svg       { transform: rotate(-90deg)
+}
+
+li:hover > button svg { transform: rotate(-270deg)
+}
+
+/* Below styles fake what can be achieved with the tailwind config
+     you need to add the group-hover variant to scale and define your custom
+     min width style.
+  	 See https://codesandbox.io/s/tailwindcss-multilevel-dropdown-y91j7?file=/index.html
+  	 for implementation with config file
+  */
+
+.group:hover .group-hover\:scale-100 { transform: scale(1)
+}
+
+.group:hover .group-hover\:-rotate-180 { transform: rotate(180deg)
+}
+
+.scale-0 { transform: scale(0)
+}
+
+.min-w-32 { min-width: 8rem
+}
+
 /* Spinner */
 
 .loading{

src/assets/css/tailwind.css

@@ -3,6 +3,8 @@
 @import 'tailwindcss/utilities';
 @import url('https://fonts.googleapis.com/css?family=Jost:300,400,500,600,700,900&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Philosopher:wght@400;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Markazi+Text:wght@400;500;600;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700&display=swap');
 
 /* Custom Styles */
 :root{
@@ -20,7 +22,7 @@ html, body{
   margin: 0;
   padding: 0;
   box-sizing: border-box;
-  font-family: "Jost", sans-serif;
+  font-family: 'Jost', 'Cairo', sans-serif;
 }
 button:focus {
   outline: none;
@@ -50,6 +52,27 @@ footer{
   text-align: center;
 }
 
+  /* since nested groupes are not supported we have to use 
+     regular css for the nested dropdowns 
+  */
+  li>ul                 { transform: translatex(100%) scale(0) }
+  li:hover>ul           { transform: translatex(101%) scale(1) }
+  li > button svg       { transform: rotate(-90deg) }
+  li:hover > button svg { transform: rotate(-270deg) }
+
+  /* Below styles fake what can be achieved with the tailwind config
+     you need to add the group-hover variant to scale and define your custom
+     min width style.
+  	 See https://codesandbox.io/s/tailwindcss-multilevel-dropdown-y91j7?file=/index.html
+  	 for implementation with config file
+  */
+  .group:hover .group-hover\:scale-100 { transform: scale(1) }
+  .group:hover .group-hover\:-rotate-180 { transform: rotate(180deg) }
+  .scale-0 { transform: scale(0) }
+  .min-w-32 { min-width: 8rem }
+
+
+
 /* Spinner */
 .loading{
   width: 125px;

src/components/layout/Master.js

@@ -1,9 +1,12 @@
 import React, { useState, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
 import { getPrayerTimesCalendar, getCityCountry } from '../../api'
 import { Spinner } from '..';
-import months from '../../data/months.json'
+// import months from '../../data/months.json'
 
 export default () => {
+  const { t, i18n } = useTranslation();
+
   const [ city, setCity] = useState('')
   const [ country, setCountry ] = useState('')
   const [ today, setToday ] = useState(0)
@@ -39,36 +42,63 @@ export default () => {
 
   }, [city, country, today, month, year])
 
+  const DayCol = ({item}) => {
+    if(item === undefined || item === null) return ''
+    else{
+      if(i18n.language === 'ar'){
+          return <td className="py-3 px-4">{item.date.hijri.weekday.ar}</td>
+        }else{
+          return <td className="py-3 px-4">{item.date.gregorian.weekday.en} <br /> ({item.date.hijri.weekday.en})</td>
+          }
+        }
+      }
+
+  const DateCell = ({item}) => {
+    const dateCellNodes = document.querySelectorAll('.date-cell')
+    const dateCells = Array.from(dateCellNodes)
+
+    if(i18n.language === 'ar'){
+      for(let i=0; i<dateCells.length; i++){
+        if(dateCells[i].innerText.includes(item.date.gregorian.month.en)){
+          dateCells[i].innerText = `${i < 9 ? '0'+(i+1) : i+1} ${t(`months.${item.date.gregorian.month.number}`)} ${item.date.gregorian.year}`
+          return <td className="date-cell py-3 px-4">{dateCells[i].innerText}</td>
+        }
+      }
+    }else{
+      return <td className="date-cell py-3 px-4">{item.date.readable}</td>
+    }
+  }
+
   if(calender === null || calender === undefined || calender.length === 0) return <Spinner />
 
   else{
     return (
       <div>
         <div className="md:px-32 py-8 w-full">
-          <h1 className="text-2xl text-center mb-2">Gregorian Calender For {months[month]}</h1>
+          <h1 className="text-2xl text-center mb-2">{t('gregorian')} {t(`months.${month+1}`)}</h1>
           <div className="shadow overflow-hidden rounded border-b border-gray-200">
             <table className="min-w-full bg-white">
               <thead className="bg-indigo-800 text-white">
                 <tr>
-                  <th className="text-start py-3 px-4 uppercase font-semibold text-sm">Day</th>
-                  <th className="text-start py-3 px-4 uppercase font-semibold text-sm">Date</th>
-                  <th className="text-start py-3 px-4 uppercase font-semibold text-sm">Imsak</th>
-                  <th className="text-start py-3 px-4 uppercase font-semibold text-sm">Fajr</th>
-                  <th className="text-start py-3 px-4 uppercase font-semibold text-sm">Sunrise</th>
-                  <th className="text-start py-3 px-4 uppercase font-semibold text-sm">Dhuhr</th>
-                  <th className="text-start py-3 px-4 uppercase font-semibold text-sm">Asr</th>
-                  <th className="text-start py-3 px-4 uppercase font-semibold text-sm">Maghrib</th>
-                  <th className="text-start py-3 px-4 uppercase font-semibold text-sm">Isha</th>
-                  <th className="text-start py-3 px-4 uppercase font-semibold text-sm">Midnight</th>
+                  <th className="text-start py-3 px-4 uppercase font-semibold text-sm">{t('day')}</th>
+                  <th className="text-start py-3 px-4 uppercase font-semibold text-sm">{t('date')}</th>
+                  <th className="text-start py-3 px-4 uppercase font-semibold text-sm">{t('imsak')}</th>
+                  <th className="text-start py-3 px-4 uppercase font-semibold text-sm">{t('fajr')}</th>
+                  <th className="text-start py-3 px-4 uppercase font-semibold text-sm">{t('sunrise')}</th>
+                  <th className="text-start py-3 px-4 uppercase font-semibold text-sm">{t('dhuhr')}</th>
+                  <th className="text-start py-3 px-4 uppercase font-semibold text-sm">{t('asr')}</th>
+                  <th className="text-start py-3 px-4 uppercase font-semibold text-sm">{t('maghrib')}</th>
+                  <th className="text-start py-3 px-4 uppercase font-semibold text-sm">{t('isha')}</th>
+                  <th className="text-start py-3 px-4 uppercase font-semibold text-sm">{t('midnight')}</th>
                 </tr>
               </thead>
               <tbody className="text-gray-700">
                   {
                     calender.map((item, i) => 
                     <React.Fragment key={i}>
                     <tr className={`row-${i+1} text-center`}>
-                      <td className="py-3 px-4">{item.date.gregorian.weekday.en} <br /> ({item.date.hijri.weekday.en})</td>
-                      <td className="py-3 px-4">{item.date.readable}</td>
+                      <DayCol item={item} />
+                      <DateCell item={item} />
                       <td className="py-3 px-4">{item.timings.Imsak.slice(0, 5)}</td>
                       <td className="py-3 px-4">{item.timings.Fajr.slice(0, 5)}</td>
                       <td className="py-3 px-4">{item.timings.Sunrise.slice(0, 5)}</td>

src/components/layout/NavBar.js

@@ -1,8 +1,18 @@
-import React from 'react'
+import React, { useState } from 'react'
 import { Link } from 'react-router-dom'
+import { useTranslation } from 'react-i18next';
+import switchLangs from '../../lang/switchLangs'
 
 export default () => {
+  const { t } = useTranslation();
+  // const [ lang, setLang] = useState('');
 
+  const onLanguageHandle = e => {
+    let locale = e.target.value;
+    // setLang(locale)
+    switchLangs(locale)
+  }
+
   return (
     <React.Fragment>
       <nav className="flex items-baseline justify-between flex-wrap bg-indigo-600 p-6 mb-5">
@@ -17,6 +27,20 @@ export default () => {
               Link 1
             </span>
           </div>
+          <div className="group inline-block">
+            <button className="outline-none focus:outline-none border px-3 py-1 bg-white rounded-sm flex items-center min-w-32">
+              <span className="pr-1 font-semibold flex-1">{t('langs')}</span>
+              <span>
+                <svg className="fill-current h-4 w-4 transform group-hover:-rotate-180 transition duration-300 ease-in-out" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
+                  <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/>
+                </svg>
+              </span>
+            </button>
+            <div className="bg-white border rounded-sm transform scale-0 group-hover:scale-100 absolute transition duration-300 ease-in-out origin-top min-w-32">
+              <button className="block w-full rounded-sm px-3 py-1 hover:bg-gray-100" onClick={onLanguageHandle} value="en">EN</button>
+              <button className="block w-full rounded-sm px-3 py-1 hover:bg-gray-100" onClick={onLanguageHandle} value="ar">AR</button>
+            </div>
+          </div>
         </div>
       </nav>
     </React.Fragment>

src/data/months.json

@@ -1,14 +1,14 @@
 {
-  "0": "January",
-  "1": "February",
-  "2": "March",
-  "3": "April",
-  "4": "May",
-  "5": "June",
-  "6": "July",
-  "7": "August",
-  "8": "September",
-  "9": "October",
-  "10": "Novmber",
-  "11": "December"
+  "1": "Jan",
+  "2": "Feb",
+  "3": "Mar",
+  "4": "Apr",
+  "5": "May",
+  "6": "Jun",
+  "7": "Jul",
+  "8": "Aug",
+  "9": "Sep",
+  "10": "Oct",
+  "11": "Nov",
+  "12": "Dec"
 }

src/i18n.js

@@ -0,0 +1,38 @@
+import i18n from 'i18next'
+import LanguageDetector from "i18next-browser-languagedetector"
+import {initReactI18next} from 'react-i18next'
+import XHR from 'i18next-xhr-backend'
+import languageEN from './lang/en/translate.json'
+import languageAR from './lang/ar/translate.json'
+
+i18n
+.use(XHR)
+.use(LanguageDetector)
+.use(initReactI18next)
+.init({
+    resources: {
+        en: languageEN,
+        ar: languageAR
+    },
+    /* default language when load the website in browser */
+    lng: "en",
+    /* When react i18next not finding any language to as default in borwser */
+    fallbackLng: "en",
+    /* debugger For Development environment */
+    debug: true,
+    ns: ["translations"],
+    defaultNS: "translations",
+    keySeparator: ".",
+    interpolation: {
+        escapeValue: false,
+        formatSeparator: ","
+    },
+    react: {
+        wait: true,
+        bindI18n: 'languageChanged loaded',
+        bindStore: 'added removed',
+        nsMode: 'default'
+    }
+})
+
+export default i18n;