[#7] Add translations

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?"
   }
 }

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>
     </>
   );