feat(#14): Adjusted items

CHANGELOG.md

@@ -15,7 +15,6 @@ 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
 

src/utils/getTranslation.ts → locales/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("../en.json").then((r) => r.default),
+ pt: () => import("../pt.json").then((r) => r.default)
 };
 
 export const getTranslation = (lang: string): Promise<TranslationData> => {

package.json

@@ -21,6 +21,7 @@
  "next-i18next": "^14.0.0",
  "react": "18.2.0",
  "react-dom": "18.2.0",
+ "react-hook-form": "^7.45.4",
  "react-i18next": "^13.0.2",
  "typescript": "5.1.6"
  },

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

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

src/app/[lang]/page.tsx

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

src/components/UI/Input/index.tsx

@@ -1,11 +1,15 @@
 import React from "react";
 import styles from './styles.module.scss';
 import { InputHTMLAttributes } from "react";
+import { useFormContext } from "react-hook-form";
 
-interface InputProps extends InputHTMLAttributes<HTMLInputElement>{}
+interface InputProps extends InputHTMLAttributes<HTMLInputElement>{
+ name: string;
+}
 
-export function Input({...rest}: InputProps){
+export function Input({name,...rest}: InputProps){
+ const {register}= useFormContext();
  return(
- <input className={styles.input} {...rest}/>
+ <input className={styles.input} id={name} {...register(name)}{...rest}/>
  )
 }