Added languages switch

Author: luistak

components/languages.tsx

@@ -0,0 +1,44 @@
+import { Locale } from 'i18n';
+import styled from 'styled-components';
+import { useRouter } from 'next/dist/client/router';
+
+const Container = styled.div`
+  top: 0;
+  right: 1rem;
+  display: flex;
+  position: fixed;
+
+  p {
+    font-size: 0.75rem;
+    text-transform: uppercase;
+    padding: 0.5rem;
+    border-radius: 0.25rem;
+
+    &:hover {
+      cursor: pointer;
+      background-color: ${({ theme }) => theme.colors.gray[100]};
+    }
+  }
+
+  * + * {
+    margin-left: 0.5rem;
+  }
+`;
+
+export function Languages() {
+  const { locales, push } = useRouter();
+
+  const handleLocaleClick = (locale: Locale) => () => {
+    push('/', '/', { locale });
+  };
+
+  return (
+    <Container>
+      {locales.map((locale: Locale) => (
+        <p key={locale} onClick={handleLocaleClick(locale)}>
+          {locale.split('-')[0]}
+        </p>
+      ))}
+    </Container>
+  );
+}

components/template.tsx

@@ -19,6 +19,7 @@ const Main = styled.main`
 
 const Footer = styled.footer`
   margin: 2rem auto;
+  font-size: 0.75rem;
 `;
 
 type PageTemplateProps = {

i18n/index.ts

@@ -24,7 +24,7 @@ const locales = {
 };
 
 type Locales = typeof locales;
-type Locale = keyof Locales | string;
+export type Locale = keyof Locales;
 type LocaleKey = keyof typeof portuguese | keyof typeof english;
 export type Translate = (key: LocaleKey) => string;
 

pages/_app.tsx

@@ -1,5 +1,5 @@
 import type { AppProps } from 'next/app';
-import { getTranslate, Translate } from 'i18n';
+import { getTranslate, Locale, Translate } from 'i18n';
 import { useEffect } from 'react';
 import * as gtag from 'lib/gtag';
 
@@ -18,7 +18,7 @@ function MyApp({ Component, pageProps, router }: AppProps<CustomProps>) {
     };
   }, [router.events]);
 
-  return <Component {...pageProps} t={getTranslate(locale)} />;
+  return <Component {...pageProps} t={getTranslate(locale as Locale)} />;
 }
 
 export default MyApp;

pages/index.tsx

@@ -5,6 +5,7 @@ import { PageTemplate } from 'components/template';
 import styled from 'styled-components';
 
 import * as gtag from 'lib/gtag';
+import { Languages } from 'components/languages';
 
 const Image = styled(NextImage)`
   border-radius: 50%;
@@ -67,6 +68,7 @@ const Home: NextPage<HomeProps> = ({ t }) => (
   <PageTemplate t={t} title={t('author')}>
     <h1>{t('welcome')}</h1>
     <p>{t('bio')}</p>
+    <Languages />
     <Image
       src="/takah.jpg"
       alt="Picture of the author"

styles/globals.ts

@@ -7,7 +7,7 @@ export const GlobalStyles = createGlobalStyle`
     margin: 0;
     font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
       Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
-    background-color: ${({ theme }) => theme.colors.gray};
+    background-color: ${({ theme }) => theme.colors.gray[200]};
     color: ${({ theme }) => theme.colors.white};
   }
 

styles/theme.ts

@@ -2,7 +2,10 @@ import 'styled-components';
 
 export const tokens = {
   colors: {
-    gray: '#262626',
+    gray: {
+      100: '#4e4d4d',
+      200: '#262626',
+    },
     white: '#ffffff',
   },
 };