Implemented the language hook

nepalingo-web/src/components/header/ChangeLanguage.tsx

@@ -2,26 +2,23 @@ import React, { useState } from "react";
 import Menu from "./Menu";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faChevronDown } from "@fortawesome/free-solid-svg-icons";
+import { LanguageKey, Languages, useLanguage } from "../../hooks/Langauge";
 
 const ChangeLanguage: React.FC = () => {
     const [isOpen, setIsOpen] = useState(false);
-    const [selectedLanguage, setSelectedLanguage] = useState("Nepal Bhasa");
+    const { selectedLanguage, switchLanguage } = useLanguage();
+
 
     const toggleMenu = () => {
         setIsOpen(!isOpen);
     };
 
-    const handleSelect = (option: string) => {
-        setSelectedLanguage(option);
+    const handleSelect = (option: LanguageKey) => {
+        switchLanguage(option);
         setIsOpen(false);
     };
-
-    const options = [
-        { label: "Nepal Bhasa", value: "newari" },
-        { label: "Tajpuriya", value: "tajpuriya" },
-        { label: "Maithili", value: "coming soon" },
-    ];
-
+    const options = Object.keys(Languages).map((key) => ({ label: key, value: Languages[key as LanguageKey] }))
+    console.log(options)
     return (
         <div className="relative text-left h-full">
             <button

nepalingo-web/src/components/header/Menu.tsx

@@ -1,13 +1,15 @@
 import React from "react";
+import { LanguageKey } from "../../hooks/Langauge";
 
 interface MenuProps {
     isOpen: boolean;
-    onSelect: (option: string) => void;
+    onSelect: (option: LanguageKey) => void;
     options: { label: string; value: string }[];
 }
 
 const Menu: React.FC<MenuProps> = ({ isOpen, onSelect, options }) => {
     if (!isOpen) return null;
+    console.log(options)
 
     return (
         <div className="origin-top-right absolute left-0 mt-2 rounded-lg shadow-lg bg-grayDark ring-1 ring-black ring-opacity-5 focus:outline-none overflow-hidden">
@@ -25,13 +27,13 @@ const Menu: React.FC<MenuProps> = ({ isOpen, onSelect, options }) => {
                             : "hover:bg-[#D03641] hover:text-white"
                             }`}
                         onClick={() =>
-                            option.value !== "comingSoon" && onSelect(option.label)
+                            option.value !== "coming soon" && onSelect(option.label as LanguageKey)
                         }
                         disabled={option.value === "coming soon"}
                     >
                         {option.label}{" "}
-                        {option.value === "comingSoon" && (
-                            <span className="text-xs text-gray-400">(Coming Soon)</span>
+                        {option.value === "coming soon" && (
+                            <p className="text-xs text-gray-400">(Coming Soon)</p>
                         )}
                     </button>
                 ))}

nepalingo-web/src/hooks/Langauge.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { useContext, useState, useEffect, createContext } from 'react';
+
+type ValueOf<T> = T[keyof T];
+export type Language = ValueOf<typeof Languages>
+
+export type LanguageKey = keyof typeof Languages;
+
+export const Languages = {
+    "Newari": "newari",
+    "Tajpuriya": "tajpuriya",
+    "Maithili": "coming soon",
+} as const
+
+
+type LanguageContextProps = {
+    selectedLanguage: string | null | undefined;
+    switchLanguage: (value: LanguageKey) => void;
+}
+const LanguageContext = createContext<LanguageContextProps>({
+    selectedLanguage: '',
+    switchLanguage: (value) => console.log(value)
+});
+
+export const LanguageProvider = ({ children }: { children: React.ReactNode }) => {
+    const [language, setLanguage] = useState<LanguageKey>("Newari")
+
+    const switchLanguage = (value: LanguageKey) => {
+        setLanguage(value)
+        localStorage.setItem('language', value)
+    }
+
+
+    useEffect(() => {
+        localStorage.getItem('language') && setLanguage(localStorage.getItem('language') as LanguageKey)
+    }, [])
+
+    return (
+        <LanguageContext.Provider value={{
+            selectedLanguage: language,
+            switchLanguage
+
+        }}>
+            {children}
+        </LanguageContext.Provider>
+    );
+};
+
+export const useLanguage = () => {
+    return useContext(LanguageContext);
+}; 

nepalingo-web/src/hooks/useDictionary.tsx

@@ -1,22 +1,17 @@
+import { Language } from './Langauge';
 import useNewari from './useNewari'
 
-const Languages = [
-    'newari',
-    'tajpuriya',
-    'maithili'
-]
-
 export type DictionaryProps = {
-    language: typeof Languages[number],
+    language: Language,
     word: string
 }
 
 export type DictionaryResponse = {
     language: string;
     word: string;
     meanings: [{
-        audio?: { uri: string},
-        image?: {uri:string},
+        audio?: { uri: string },
+        image?: { uri: string },
         language: string,
         meaningOriginal?: string,
         meaningNp?: string,

nepalingo-web/src/main.tsx

@@ -4,12 +4,15 @@ import App from "./App";
 import "./index.css";
 import { AuthProvider } from "./components/userAuth/AuthContext";
 import { StreakProvider } from "./components/StreakContext";
+import { LanguageProvider } from "./hooks/Langauge";
 ReactDOM.createRoot(document.getElementById("root")!).render(
-  <React.StrictMode>
-    <AuthProvider>
-      <StreakProvider>
-        <App />
-      </StreakProvider>
-    </AuthProvider>
-  </React.StrictMode>
+    <React.StrictMode>
+        <AuthProvider>
+            <LanguageProvider>
+                <StreakProvider>
+                    <App />
+                </StreakProvider>
+            </LanguageProvider>
+        </AuthProvider>
+    </React.StrictMode>
 );