From 4b9fe58a2d966596f9bbd3c8a3dd481e8be7d359 Mon Sep 17 00:00:00 2001
From: Liam Stevens <8955671+liamstevens111@users.noreply.github.com>
Date: Wed, 15 Feb 2023 13:55:17 +0700
Subject: [PATCH] [#7] Add translations

---
 public/locales/en/translation.json |  8 +++++---
 src/screens/Home/login.tsx         | 20 +++++++++++++++-----
 2 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json
index bab8636..8f819dd 100644
--- a/public/locales/en/translation.json
+++ b/public/locales/en/translation.json
@@ -1,6 +1,8 @@
 {
-  "sample_page": {
-    "message": "Edit {{codeSample}} and save to reload",
-    "learn_react": "Learn React"
+  "login": {
+    "sign_in": "Sign in",
+    "email": "Email",
+    "password": "Password",
+    "forgot_password": "Forgot?"
   }
 }
diff --git a/src/screens/Home/login.tsx b/src/screens/Home/login.tsx
index ca6f777..8dda686 100644
--- a/src/screens/Home/login.tsx
+++ b/src/screens/Home/login.tsx
@@ -1,3 +1,5 @@
+import { useTranslation } from 'react-i18next';
+
 import logo from 'assets/images/logo.svg';
 import Button from 'components/Button';
 import Input from 'components/Input';
@@ -8,20 +10,28 @@ const tempHandler = () => {
 };
 
 function LoginScreen() {
+  const { t } = useTranslation('translation');
+
   return (
     <>
       <img className="inline-block" src={logo} alt="logo" />
-      <p className="text-white opacity-50 my-8">Sign in to Nimble</p>
+      <p className="text-white opacity-50 my-8">{t('login.sign_in')} to Nimble</p>
       <form>
-        <Input name="email" label="Email" type="text" className="block h-14 w-80 my-3" onInputChange={tempHandler} />
+        <Input name="email" label={t('login.email')} type="text" className="block h-14 w-80 my-3" onInputChange={tempHandler} />
         <div className="relative w-80">
-          <Input name="password" label="Password" type="password" className="block h-14 w-80 my-3" onInputChange={tempHandler} />
+          <Input
+            name="password"
+            label={t('login.password')}
+            type="password"
+            className="block h-14 w-80 my-3"
+            onInputChange={tempHandler}
+          />
           {/* Change to React Router Link when implement #17 */}
           <a href="." className="absolute text-white opacity-50 my-8 left-60 top-5">
-            Forgot?
+            {t('login.forgot_password')}
           </a>
         </div>
-        <Button type="button" text="Sign in" className="h-14 w-80" onButtonClick={tempHandler} />
+        <Button type="button" text={t('login.sign_in')} className="h-14 w-80" onButtonClick={tempHandler} />
       </form>
     </>
   );