Mood-al

import React from "react";
import { useRouter } from "next/router";
import Link from "next/link";
import { Tab, Tabs } from "react-tabs-scrollable";
import Title from "../Title";

const NavDemo = ({ title }) => {
  const [activeTab, setActiveTab] = React.useState(1);
  const router = useRouter();

Mood-al

import React from "react";
import { useRouter } from "next/router";
import Link from "next/link";
import { Tab, Tabs } from "react-tabs-scrollable";
import Title from "../Title";

const NavDemo = ({ title }) => {
  const [activeTab, setActiveTab] = React.useState(1);
  const router = useRouter();

Mood-al

const NavDemo = () => {
  const [activeTab, setActiveTab] = React.useState(1);
  const router = useRouter();

  // get the id of the page and turn it into integer
  const pageId = +router.asPath.split("/")[2];
  React.useEffect(() => {
    // if it equals 0 set the active tab to 0
    if (pageId === 0) {
      setActiveTab(0);

Mood-al

import i18n from "i18next";
import { initReactI18next } from "react-i18next";
// this package will help us to get the translations from our API
import Backend from "i18next-http-backend";
// this package will help us to detect the default language of the client browser and set the i18n language to it
import LanguageDetector from "i18next-browser-languagedetector";
import axios from "axios";
import { TRANSLATIONS_BASE_URL } from "./config";

// i18next-http-backend options object that will be passed inside i18next

Mood-al

export const donateRoutes = {
  medical_support: {
    constant: "sections_medical_support",
    sections: [
      {
        main_section_name: "medical_support",
        section_name: "medical-cases",
        title_constant_name: "medical_cases_title",
        description_constant_name: "medical_cases_description",
        route_url: "medical-cases",

Mood-al

import { useEffect, useState } from "react";
import { isRTL } from "../utils/isRTL";

const useInputValueLangaugeDetector = (value, locale) => {
  const [dir, setDir] = useState();

  const [focussed, setFocussed] = useState(false);

  /* If the user is typing and the language is Arabic, then set the direction to
 right-to-left. */

Mood-al

import { useEffect, useState } from "react";
import { isRTL } from "../utils/isRTL";

const useInputValueLangaugeDetector = (value, locale) => {
  const [dir, setDir] = useState();

  const [focussed, setFocussed] = useState(false);

  /* If the user is typing and the language is Arabic, then set the direction to
 right-to-left. */

Mood-al

import { useEffect, useState } from "react";
import { isRTL } from "../utils/isRTL";

const useInputValueLangaugeDetector = (value, locale) => {
  const [dir, setDir] = useState();

  const [focussed, setFocussed] = useState(false);

  /* If the user is typing and the language is Arabic, then set the direction to
 right-to-left. */

Mood-al

import { useEffect, useState } from "react";
import { isRTL } from "../utils/isRTL";

const useInputDirectionDetector = (value, locale) => {
  const [dir, setDir] = useState();

  const [focussed, setFocussed] = useState(false);

  /* If the user is typing and the language is Arabic, then set the direction to
 right-to-left. */

Mood-al

useEffect(() => {
    if (value === "" && locale === "ar") {
      setDir("rtl");
      return;
    }
    /* The above code is setting the direction of the text to right to left if the user is focussed on
    the text box. */
    if (focussed) {
      isRTL(value) ? setDir("rtl") : setDir("ltr");
    }