navigator error solved

src/app/context/language.tsx

@@ -6,6 +6,11 @@ interface LanguageContextProviderProps
   children: ReactNode;
 }
 
+interface Navigator {
+  // Properties
+  readonly language: string;
+}
+
 interface LanguageContextValue 
 {
   language: string;
@@ -17,13 +22,20 @@ const LanguageContext = createContext<LanguageContextValue | undefined>(undefine
 export const LanguageContextProvider = ({ children }: LanguageContextProviderProps) => {
 
     const detectLanguage = ():string => { //function used to execute useEffect before useState
-        if (navigator.language.includes('es')) 
-        {
-            return 'Spanish';
-        } 
-        else 
+        if (typeof navigator !== "undefined") {
+          // browser code
+            if ((navigator as Navigator).language.includes('es')) 
+            {
+                return 'Spanish';
+            } 
+            else 
+            {
+                return 'English';
+            }
+        }
+        else
         {
-            return 'English';
+            return '';
         }
     };
 
@@ -35,8 +47,6 @@ export const LanguageContextProvider = ({ children }: LanguageContextProviderPro
 
     const [language, setLanguage] = useState(startLanguage);
 
-    console.log(navigator.language)
-
     return (
         <LanguageContext.Provider value={{ language, setLanguage }}>
         {children}

src/app/layout.tsx

@@ -23,4 +23,4 @@ export default function RootLayout({
       </body>
     </html>
   )
-}
+}

src/components/CrtSwitch.tsx

@@ -36,11 +36,12 @@ const CrtSwtich: React.FC<CrtProps> = ({ changeState }) => {
     <section className={styles.container}>
       <input
         className={styles.checkbox}
+        id='crtSwitch'
         type="checkbox"
         checked={crt}
         onChange={handleChange}
       />
-      <label style={vt323.style} htmlFor="">{label}</label>
+      <label style={vt323.style} htmlFor="crtSwitch">{label}</label>
     </section>
   );
 };

src/components/LanguageSwitch.tsx

@@ -1,9 +1,8 @@
-import React, {useState, useEffect, useRef} from 'react';
 import styles from '../css/switch.module.css'
 import { vt323 } from '../fonts/fonts';
 import { useLanguageContext } from '../app/context/language';
 
-const Typewriter = () => {
+const LanguageSwitch = () => {
     const {language, setLanguage} = useLanguageContext();
 
     let l1:string
@@ -28,7 +27,6 @@ const Typewriter = () => {
     const changeState = (language:string) => {
         setLanguage(language);
     };
-      console.log(language) //TODO delete this line
 
     return (
         <section className={styles.languageSwitchContainer}>
@@ -37,24 +35,25 @@ const Typewriter = () => {
                     className={styles.checkbox}
                     type="radio"
                     name='language'
+                    id="english"
                     checked={language=='English'}
-                    onClick={() => changeState('English')}
+                    onChange={() => changeState('English')}
                     />
-                <label style={vt323.style} htmlFor="" >{l1}</label>
+                <label style={vt323.style} htmlFor="english" >{l1}</label>
             </section>
             <section className={styles.section}>
                 <input
                     className={styles.checkbox}
                     type="radio"
-                    id='language'
+                    id='spanish'
                     name='language'
                     checked={language=='Spanish'}
-                    onClick={() => changeState('Spanish')}
+                    onChange={() => changeState('Spanish')}
                 />
-                <label style={vt323.style} htmlFor="" >{l2}</label>
+                <label style={vt323.style} htmlFor="spanish" >{l2}</label>
             </section>
         </section>
     )
 };
 
-export default Typewriter;
+export default LanguageSwitch;

src/components/Terminal.tsx

@@ -289,6 +289,7 @@ const Terminal = () => {
                             ref={inputRef}
                             style={vt323.style}
                             type="text"
+                            id='prompt'
                             value={input} 
                             onChange={e=>setInput(e.target.value)}
                             onKeyDown={e=>{

src/css/globals.css

@@ -2,6 +2,7 @@
   :root {
     --foreground-rgb: 255, 255, 255;
     --background-start-rgb: 0, 0, 0;
+    background-color: black; /*TODO*/
     --background-end-rgb: 0, 0, 0;
 
     --primary-glow: radial-gradient(rgba(1, 65, 255, 0.4), rgba(1, 65, 255, 0));

src/css/switch.module.css

@@ -56,7 +56,6 @@
     {
         width: 50%;
         font-size: 2vh;
-        justify-content: space-between;
     }
     .languageSwitchContainer
     {

src/css/terminal.module.css

@@ -29,7 +29,7 @@
 
 .history
 {
-    padding: 15px;
+    padding: 15px 15px 0px 15px;
     /* white-space: pre-wrap;
     word-wrap: break-word; */
     width: 100%;