feat: Integrate LanguageProvider into App component and update Tabs to use selected language

Author: raymondyangdev

src/components/App/index.tsx

@@ -1,22 +1,24 @@
 import '@styles/styles.sass'
 
 import React from 'react'
+import { LanguageProvider } from '@components/Language/context'
 import { SidebarProvider } from '@components/Sidebar/context'
 
 import Background from '@components/Background'
 import Appbar from '@/components/Appbar'
 import Content from '@components/Content'
 
-
 export default function App() {
     return (
         <React.StrictMode>
             <SidebarProvider>
-                <div className="App">
-                    <Background />
-                    <Appbar />
-                    <Content />
-                </div>
+                <LanguageProvider>
+                    <div className="App">
+                        <Background />
+                        <Appbar />
+                        <Content />
+                    </div>
+                </LanguageProvider>
             </SidebarProvider>
         </React.StrictMode>
     )

src/components/Tabs/index.tsx

@@ -1,6 +1,6 @@
 import styles from './tabs.module.sass'
 
-import { Children, ReactElement, ReactNode, useState } from 'react'
+import { Children, ReactElement, ReactNode } from 'react'
 
 import Code from '@components/Code'
 import CopyButton from '@components/CopyButton'
@@ -9,7 +9,7 @@ import SvgPython from '@icons/Python'
 import SvgJavascript from '@/icons/Javascript'
 import SvgCpp from '@icons/Cpp'
 import SvgJava from '@/icons/Java'
-
+import { useLanguage } from '@components/Language/context'
 
 interface TabsProps {
     title: string
@@ -21,22 +21,25 @@ interface TabProps {
     language: 'python' | 'javascript' | 'java' | 'cpp'
 }
 
-
 const LANGUAGE_ICONS = {
     python: SvgPython,
     javascript: SvgJavascript,
     cpp: SvgCpp,
-    java: SvgJava
+    java: SvgJava,
 }
 
-
 export default function Tabs({ title, children }: TabsProps) {
-    const [activeIndex, setActiveIndex] = useState(0)
+    const { selectedLanguage, setSelectedLanguage } = useLanguage()
     const tabs = Children.toArray(children) as ReactElement<TabProps>[]
+    const activeIndex = tabs.findIndex(
+        (tab) => tab.props.language === selectedLanguage
+    )
     const code = tabs[activeIndex].props.code
     const language = tabs[activeIndex].props.language
 
-    const changeTab = (index: number) => setActiveIndex(index)
+    const changeTab = (index: number) => {
+        setSelectedLanguage(tabs[index].props.language)
+    }
     const handleCopy = () => navigator.clipboard.writeText(code)
 
     const renderTabButtons = () => {