feat(#14): Created username choice

CHANGELOG.md

@@ -15,6 +15,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Created support for multiple languages [MBU-11](https://memebattle.atlassian.net/browse/MBU-11)
 - Default theme and style settings [MBU-12](https://memebattle.atlassian.net/browse/MBU-12)
 - Created the LICENSE [MBU-13](https://memebattle.atlassian.net/browse/MBU-13)
+- Created username choice [#14](https://github.com/Meme-Battle/web/issues/14)
 
 ### Fixed
 

locales/en.json

@@ -1,3 +1,4 @@
 {
- "hello": "Hello word!"
+ "hello": "Hello word!",
+ "nameInput": "Insert your name"
 }

locales/pt.json

@@ -1,3 +1,4 @@
 {
- "hello": "Ola mundo!"
+ "hello": "Ola mundo!",
+ "nameInput": "Insira seu nome"
 }

src/app/[lang]/home/page.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { getTranslation } from '../../../utils/getTranslation';
+import styles from './styles.module.scss';
+import { Input } from '@/components/UI/Input';
+
+interface HomeProps {
+ params: any
+}
+async function Home({params}: HomeProps) {
+ const lang = await getTranslation(params.lang)
+ return (
+ <Input 
+ type='text'
+ placeholder={lang.nameInput}
+ />
+ )
+}
+
+export default Home;

src/app/[lang]/page.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import {getTranslation } from '../../../utils/getTranslation'
+import {getTranslation } from '../../utils/getTranslation'
 
 interface pageProps {
  params: any

src/components/UI/Input/index.tsx

@@ -0,0 +1,11 @@
+import React from "react";
+import styles from './styles.module.scss';
+import { InputHTMLAttributes } from "react";
+
+interface InputProps extends InputHTMLAttributes<HTMLInputElement>{}
+
+export function Input({...rest}: InputProps){
+ return(
+ <input className={styles.input} {...rest}/>
+ )
+}

src/middleware.ts

@@ -1,8 +1,8 @@
 import { NextResponse } from "next/server";
 import type { NextRequest } from "next/server";
 import { i18n } from "../i18n";
-import { getLocale } from "../utils/getLocale";
-import pageError from "../utils/pageError";
+import { getLocale } from "./utils/getLocale";
+import pageError from "./utils/pageError";
 
 export async function middleware(request: NextRequest) {
  const pathname = request.nextUrl.pathname;

utils/getLocale.ts → src/utils/getLocale.ts

@@ -1,5 +1,5 @@
 import type { NextRequest } from "next/server";
-import { i18n } from "../i18n";
+import { i18n } from "../../i18n";
 import Negotiator from "negotiator";
 import { match as matchLocale } from "@formatjs/intl-localematcher";
 

utils/getTranslation.ts → src/utils/getTranslation.ts

@@ -3,8 +3,8 @@ interface TranslationData {
 }
 
 const locales: { [key: string]: () => Promise<TranslationData> } = {
- en: () => import("../locales/en.json").then((r) => r.default),
- pt: () => import("../locales/pt.json").then((r) => r.default)
+ en: () => import("../../locales/en.json").then((r) => r.default),
+ pt: () => import("../../locales/pt.json").then((r) => r.default)
 };
 
 export const getTranslation = (lang: string): Promise<TranslationData> => {