Merge remote-tracking branch 'upstream/main' into feat/themes-page-implementation

Author: wlee261

package-lock.json

@@ -23,12 +23,15 @@
     "@typescript-eslint/eslint-plugin": "^5.60.1",
     "@vitejs/plugin-react": "^4.2.1",
     "file-saver": "^2.0.5",
+    "i18next-browser-languagedetector": "^8.0.0",
+    "i18next-http-backend": "^2.6.1",
     "jszip": "^3.10.1",
     "lucide-react": "^0.376.0",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-chatbotify": "^2.0.0-beta.3",
     "react-dom": "^18.2.0",
+    "react-i18next": "^15.0.1",
     "react-loading-skeleton": "^3.4.0",
     "react-router-dom": "^6.2.2",
     "uuid": "^9.0.1",

package.json

@@ -1,17 +1,22 @@
 import { useAppTheme } from "../../context/AppThemeContext";
+import { useTranslation } from "react-i18next";
+
 
 const AppThemeToggle = () => {
 	// context for handling app theme
 	const { appTheme, toggleAppTheme } = useAppTheme()
 
+	// eslint-disable-next-line @typescript-eslint/no-unused-vars
+	const {t} = useTranslation();
+
 	const handleClick = () => {
 		toggleAppTheme()
 	}
 
 	console.log(appTheme)
 
 	return <div>
-		<button onClick={handleClick}>{appTheme}</button>
+		<button onClick={handleClick}>${appTheme}</button>
 	</div>
 }