Implement Language Toggle Feature for English and French

Pull Request Description

Overview

This pull request introduces a language toggle feature that allows users to switch between English and French within the application. The changes enable dynamic loading of corresponding language files for the text area, enhancing the user experience for bilingual users.

Code Changes

HomePage Component
- Introduced a state variable language to track the current language, initialized to English.
- Added a toggleLanguage function to switch between English and French when the language text is clicked.
- Passed the language state as a prop to the TextArea component.
```
const [language, setLanguage] = useState<'english' | 'french'>('english');

const toggleLanguage = () => {
  setLanguage((prev) => (prev === 'english' ? 'french' : 'english'));
};
```

TextArea Component

Modified the useEffect hook to dynamically import the correct JSON language file based on the language prop received from HomePage.

React.useEffect(() => {
  import(`../modules/TextFiles/${language === 'english' ? 'English' : 'French'}/${type}.json`).then((word) => {
     setWordList(word.default);
  });
}, [type, language]);

User Interface Changes

Users can now toggle between English and French by clicking on the language text displayed on the home page. The text changes accordingly to reflect the selected language.
The TextArea dynamically loads words from the appropriate language JSON file based on the user's selection.
Before Toggle:
After Toggle:

JhohannesK / TipoHiZ

Implement Language Toggle Feature for English and French #136

Pull Request Description

Overview

Code Changes

User Interface Changes