Merge pull request #2 from raymondyangdev/main

1: Sync language selection across tabs and persist state using localStorage

Author: jwl-7

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/Code/code.module.sass

@@ -10,7 +10,7 @@
         background-color: var(--code-line-hover-color)
 
 .line
-    display: inline
+    display: block
     border-left: 0.5px solid var(--code-line-number-color)
     padding-left: 1em
 

src/components/Language/context.tsx

@@ -0,0 +1,53 @@
+import {
+    createContext,
+    useContext,
+    useState,
+    ReactNode,
+    useEffect,
+} from 'react'
+
+type Language = 'python' | 'javascript' | 'java' | 'cpp'
+
+interface LanguageContextType {
+    selectedLanguage: Language
+    setSelectedLanguage: (language: Language) => void
+}
+
+const LanguageContext = createContext<LanguageContextType | undefined>(
+    undefined
+)
+
+interface LanguageProviderProps {
+    children: ReactNode
+}
+
+export const LanguageProvider = ({ children }: LanguageProviderProps) => {
+    // Get the language from localStorage or default to 'python'
+    const initialLanguage: Language =
+        (localStorage.getItem('selectedLanguage') as Language) || 'python'
+
+    const [selectedLanguage, setSelectedLanguage] =
+        useState<Language>(initialLanguage)
+
+    useEffect(() => {
+        localStorage.setItem('selectedLanguage', selectedLanguage)
+    }, [selectedLanguage])
+
+    return (
+        <LanguageContext.Provider
+            value={{ selectedLanguage, setSelectedLanguage }}
+        >
+            {children}
+        </LanguageContext.Provider>
+    )
+}
+
+export function useLanguage() {
+    const context = useContext(LanguageContext)
+
+    if (context === undefined) {
+        throw new Error('useLanguage must be used within a LanguageProvider')
+    }
+
+    return context as LanguageContextType
+}

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 = () => {