added i18n and translated header

package.json

@@ -15,10 +15,13 @@
     "@types/jest": "^24.0.0",
     "@types/node": "^12.0.0",
     "@types/react-dom": "^16.9.0",
+    "i18next": "^19.4.2",
+    "i18next-browser-languagedetector": "^4.1.1",
     "json-beautify": "^1.1.1",
     "pure-react-carousel": "^1.27.0",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
+    "react-i18next": "^11.3.4",
     "react-scripts": "3.4.1",
     "react-syntax-highlighter": "^12.2.1",
     "react-youtube": "^7.11.1",

src/components/header.tsx

@@ -1,5 +1,7 @@
 import React from "react";
 
+import { useTranslation } from "react-i18next";
+
 import { Grid, Typography, Container, Button } from "@material-ui/core";
 
 import useHeaderStyles from "../styles/header";
@@ -8,18 +10,19 @@ import wave1 from "../assets/wave1.svg";
 import face from "../assets/face.png";
 
 function Header() {
+  const { t, i18n } = useTranslation();
   const style = useHeaderStyles();
 
   const greeting = () => {
     const time = new Date();
     const hour = Math.floor(time.getHours());
     if (hour >= 5 && hour < 12) {
-      return "Bom dia!";
+      return "header:good_morning";
     }
     if (hour >= 12 && hour < 18) {
-      return "Boa tarde!";
+      return "header:good_afternoon";
     }
-    return "Boa noite!";
+    return "header:good_evening";
   };
 
   return (
@@ -29,24 +32,33 @@ function Header() {
         <Grid container spacing={2}>
           <Grid item xs={12} md={8} className={style.containerItem}>
             <Typography variant="h2" className={style.text}>
-              {greeting()}
+              {t(greeting())}
             </Typography>
             <Typography variant="h4" className={style.text}>
-              Eu sou o Guilherme e eu desenvolvo software.
+              {t("header:hello1")}
             </Typography>
             <Typography variant="h4" className={style.text}>
-              Esse é o meu portfolio.
+              {t("header:hello2")}
             </Typography>
             <Grid>
               <Button size="large" variant="contained" className={style.button}>
-                Quero ver
-              </Button>
-              <Button size="large" variant="contained" className={style.button}>
-                Direto ao assunto
+                {t("header:show_me")}
               </Button>
               <Button size="large" variant="contained" className={style.button}>
-                English, please
+                {t("header:straight_to_the_point")}
               </Button>
+              {i18n.languages
+                .filter((lng) => lng.length === 5 && lng !== i18n.language)
+                .map((lng) => (
+                  <Button
+                    size="large"
+                    variant="contained"
+                    className={style.button}
+                    onClick={() => i18n.changeLanguage(lng)}
+                  >
+                    {t(`header:switch_to`, { lng })}
+                  </Button>
+                ))}
             </Grid>
           </Grid>
           <Grid item xs={12} md={4} className={style.containerItem}>

src/i18n/en-US/header.json

@@ -0,0 +1,10 @@
+{
+  "good_morning": "Good morning!",
+  "good_afternoon": "Good afternoon!",
+  "good_evening": "Good evening!",
+  "hello1": "I'm Guilherme and I develop software.",
+  "hello2": "This is my portfolio.",
+  "show_me": "Let me see",
+  "straight_to_the_point": "Straight to the point",
+  "switch_to": "See in English (US)"
+}

src/i18n/en-US/index.ts

@@ -0,0 +1,5 @@
+import header from "./header.json";
+
+export default {
+  header,
+};

src/i18n/index.ts

@@ -0,0 +1,22 @@
+import i18n from "i18next";
+import { initReactI18next } from "react-i18next";
+import LanguageDetector from "i18next-browser-languagedetector";
+
+import enUS from "./en-US";
+import ptBR from "./pt-BR";
+
+i18n
+  .use(LanguageDetector)
+  .use(initReactI18next)
+  .init({
+    debug: false,
+    ns: ["common, header"],
+    defaultNS: "common",
+    resources: {
+      "en-US": enUS,
+      "pt-BR": ptBR,
+    },
+    fallbackLng: ["en-US", "pt-BR"],
+  });
+
+export default i18n;

src/i18n/pt-BR/header.json

@@ -0,0 +1,10 @@
+{
+  "good_morning": "Bom dia!",
+  "good_afternoon": "Boa tarde!",
+  "good_evening": "Boa noite!",
+  "hello1": "Eu sou o Guilherme e eu desenvolvo software.",
+  "hello2": "Esse é o meu portfólio.",
+  "show_me": "Quero ver",
+  "straight_to_the_point": "Direto ao assunto",
+  "switch_to": "Ver em Português (BR)"
+}

src/i18n/pt-BR/index.ts

@@ -0,0 +1,5 @@
+import header from "./header.json";
+
+export default {
+  header,
+};

src/index.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import ReactDOM from "react-dom";
 import Home from "./pages/Home";
+import "./i18n";
 
 ReactDOM.render(
   <React.StrictMode>

yarn.lock

@@ -5172,6 +5172,13 @@ html-minifier-terser@^5.0.1:
     relateurl "^0.2.7"
     terser "^4.6.3"
 
+[email protected]:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/html-parse-stringify2/-/html-parse-stringify2-2.0.1.tgz#dc5670b7292ca158b7bc916c9a6735ac8872834a"
+  integrity sha1-3FZwtyksoVi3vJFsmmc1rIhyg0o=
+  dependencies:
+    void-elements "^2.0.1"
+
 [email protected]:
   version "4.0.0-beta.11"
   resolved "https://registry.yarnpkg.com/html-webpack-plugin/-/html-webpack-plugin-4.0.0-beta.11.tgz#3059a69144b5aecef97708196ca32f9e68677715"
@@ -5276,6 +5283,20 @@ hyphenate-style-name@^1.0.3:
   resolved "https://registry.yarnpkg.com/hyphenate-style-name/-/hyphenate-style-name-1.0.3.tgz#097bb7fa0b8f1a9cf0bd5c734cf95899981a9b48"
   integrity sha512-EcuixamT82oplpoJ2XU4pDtKGWQ7b00CD9f1ug9IaQ3p1bkHMiKCZ9ut9QDI6qsa6cpUuB+A/I+zLtdNK4n2DQ==
 
+i18next-browser-languagedetector@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/i18next-browser-languagedetector/-/i18next-browser-languagedetector-4.1.1.tgz#89656cd9b78bb92dc0c7e86c0d9606f3f15fabfa"
+  integrity sha512-akv0zurR/2KU7s1qaWkirY9FEEOT1TNsQaezEg8+1BLLQre7vylqb7tYoUgYqP/0/BEzXJgnoQnj+sh5xYFMhg==
+  dependencies:
+    "@babel/runtime" "^7.5.5"
+
+i18next@^19.4.2:
+  version "19.4.2"
+  resolved "https://registry.yarnpkg.com/i18next/-/i18next-19.4.2.tgz#5be6ebbef9cfa44a2691ab47b8ccd8cf7179cff5"
+  integrity sha512-gDctWhIgACc92Uub7vb0GTdtLKZTgiDIiBkGExOSPgqhCSyyPOb8svLxixzzSS3yMjC3fduK/BbkRt95JHwvDw==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+
 [email protected], iconv-lite@^0.4.24:
   version "0.4.24"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
@@ -8895,6 +8916,14 @@ react-error-overlay@^6.0.7:
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.7.tgz#1dcfb459ab671d53f660a991513cb2f0a0553108"
   integrity sha512-TAv1KJFh3RhqxNvhzxj6LeT5NWklP6rDr2a0jaTfsZ5wSZWHOGeqQyejUp3xxLfPt2UpyJEcVQB/zyPcmonNFA==
 
+react-i18next@^11.3.4:
+  version "11.3.4"
+  resolved "https://registry.yarnpkg.com/react-i18next/-/react-i18next-11.3.4.tgz#355df5fe5133e5e30302d166f529678100ffc968"
+  integrity sha512-IRZMD7PAM3C+fJNzRbyLNi1ZD0kc3Z3obBspJjEl+9H+ME41PhVor3BpdIqv/Rm7lUoGhMjmpu42J45ooJ61KA==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    html-parse-stringify2 "2.0.1"
+
 react-is@^16.12.0, react-is@^16.7.0, react-is@^16.8.0, react-is@^16.8.1, react-is@^16.8.4:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
@@ -10710,6 +10739,11 @@ vm-browserify@^1.0.1:
   resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-1.1.2.tgz#78641c488b8e6ca91a75f511e7a3b32a86e5dda0"
   integrity sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ==
 
+void-elements@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/void-elements/-/void-elements-2.0.1.tgz#c066afb582bb1cb4128d60ea92392e94d5e9dbec"
+  integrity sha1-wGavtYK7HLQSjWDqkjkulNXp2+w=
+
 w3c-hr-time@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz#0a89cdf5cc15822df9c360543676963e0cc308cd"