update setting language

frontend/src/components/NavBar.tsx

@@ -1,7 +1,7 @@
 // NavBar.tsx
 import React, { useState, useEffect } from 'react';
 import { useNavigate, useLocation } from 'react-router-dom';
-import { NavItem } from '../components/NavItem'; // adjust the path as needed
+import { NavItem } from '../components/NavItem';
 
 export default function NavBar() {
     const navigate = useNavigate();

frontend/src/pages/CharacterSelection.tsx

@@ -13,6 +13,10 @@ export default function CharacterSelection() {
         // Add more characters here
     ];
 
+    const startSession = () => {
+        // Start a session with the selected character
+    }
+
     const handleCharacterClick = (characterName: string, characterImage: string) => {
         navigate('/character', { state: { name: characterName, image: characterImage } });
     }

frontend/src/pages/Signup.tsx

@@ -31,7 +31,7 @@ export default function Signup() {
                 console.log(confirmPassword)
                 return
             } else {
-                signup(username, password, "")
+                signup(username, password, lang)
                 navigate('/courses')
             }
         }
@@ -58,7 +58,7 @@ export default function Signup() {
             {err && <label className="text-red-600">{err}</label>}
 
             {stage === 0 && <>
-            {possibleLangs.map((lang, i) => <button className="white flex items-center gap-5" onClick={() => setStage(1)} key={i}>
+            {possibleLangs.map((lang, i) => <button className="white flex items-center gap-5" onClick={() => {setLang(lang.name); setStage(1);}} key={i}>
                 <img src={lang.icon} alt={lang.name} className="max-w-[50px]"/>
                 <span>{lang.name}</span>
             </button>)}