language context added

AB10110F · Aug 15, 2023 · 25adc9d · 25adc9d
1 parent 3bf17f6
commit 25adc9d
Show file tree

Hide file tree

Showing 10 changed files with 468 additions and 132 deletions.
diff --git a/src/app/context/language.tsx b/src/app/context/language.tsx
@@ -0,0 +1,36 @@
+"use client"
+import { createContext, useContext, useState, ReactNode } from "react";
+
+interface LanguageContextProviderProps 
+{
+  children: ReactNode;
+}
+
+interface LanguageContextValue 
+{
+  language: string;
+  setLanguage: (language: string) => void;
+}
+
+const LanguageContext = createContext<LanguageContextValue | undefined>(undefined);
+
+export const LanguageContextProvider = ({ children }: LanguageContextProviderProps) => {
+  const [language, setLanguage] = useState('Spanish');
+
+  console.log(navigator.language)
+
+  return (
+    <LanguageContext.Provider value={{ language, setLanguage }}>
+      {children}
+    </LanguageContext.Provider>
+  );
+};
+
+export const useLanguageContext = (): LanguageContextValue => {
+  const context = useContext(LanguageContext);
+  if (!context) 
+  {
+    throw new Error("useLanguageContext must be used within a LanguageContextProvider");
+  }
+  return context;
+};
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,6 +1,7 @@
 import '@/css/globals.css';
 import Dots from '@/components/Dots';
 import {Metadata} from 'next';
+import { LanguageContextProvider } from './context/language'
 
 export const metadata: Metadata = {
   title: 'AB10110F',
@@ -15,8 +16,10 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body>
-      <Dots/>
-        {children}
+        <LanguageContextProvider>
+          <Dots/>
+          {children}
+        </LanguageContextProvider>
       </body>
     </html>
   )

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,34 +1,53 @@
 "use client";
-import React, {useState} from 'react';
+import React, {use, useState} from 'react';
 import styles from '../css/page.module.css';
 import  Terminal  from '@/components/Terminal';
 import Typewriter from '@/components/Typewriter';
 import Model from '@/components/Model';
-import Controls from '@/components/Controls';
-import Image from 'next/image'
+import CrtSwitch from '@/components/CrtSwitch';
+import LanguageSwitch from '@/components/LanguageSwitch';
+import { useLanguageContext } from './context/language';
+import Image from 'next/image';
 
 export default function Home() {
 
   const [currentCrt, setCrt] = useState(false)
+  const {language, setLanguage} = useLanguageContext();
   const scanlines:string = currentCrt ? styles.scanlines : styles.hidden;
   const scanner:string = currentCrt ? styles.scanner : styles.hidden;
   const bright:string = currentCrt ? styles.bright : styles.main;
 
+  let title:string
+  if(language == 'English')
+  {
+      title = 'Front-End Developer'
+  }
+  else if(language == 'Spanish')
+  {
+      title = 'Desarrollador Front-End'
+  }
+  else
+  {
+      title = ''
+  }
 
   return (
     <main className={bright}>
       <span className={scanner}></span>
       <Image src="/scanlines.jpg" width={500} height={500} className={scanlines} alt="image" />
-      <Typewriter text={'Front-End Developer'}/>
+      <Typewriter text={title}/>
       <div className={styles.grid}>
             <Terminal/>
             <section className={styles.column}>
-                <article className={styles.canvas}>
-                    <Model/>
-                </article>
+                <section className ={styles.languageContainer}>
+                    <article className={styles.canvas}>
+                        <Model/>
+                    </article>
+                    <LanguageSwitch/>
+                </section>
                 <article className={styles.bars}></article>
                 <article className={styles.controls}>
-                    <Controls changeState={(currentCrt) => setCrt(currentCrt)} />
+                    <CrtSwitch changeState={(currentCrt) => setCrt(currentCrt)} />
                 </article>
             </section>
       </div>

diff --git a/src/components/Controls.tsx b/src/components/Controls.tsx
diff --git a/src/components/CrtSwitch.tsx b/src/components/CrtSwitch.tsx
@@ -0,0 +1,48 @@
+import React, { useState } from 'react';
+import styles from '../css/switch.module.css';
+import { vt323 } from '../fonts/fonts';
+import { useLanguageContext } from '../app/context/language';
+
+interface CrtProps {
+  changeState: (newValue: boolean) => void;
+}
+
+const CrtSwtich: React.FC<CrtProps> = ({ changeState }) => {
+  const [crt, setCrt] = useState(false);
+  const {language, setLanguage} = useLanguageContext();
+
+  const handleChange = () => {
+    const newValue:boolean = !crt;
+    setCrt(newValue);
+    changeState(newValue);
+  };
+
+  let label:string;
+
+  if(language == 'English')
+  {
+      label = 'CRT EFFECT'
+  }
+  else if(language == 'Spanish')
+  {
+      label = 'EFECTO CRT'
+  }
+  else
+  {
+      label = ''
+  }
+
+  return (
+    <section className={styles.container}>
+      <input
+        className={styles.checkbox}
+        type="checkbox"
+        checked={crt}
+        onChange={handleChange}
+      />
+      <label style={vt323.style} htmlFor="">{label}</label>
+    </section>
+  );
+};
+
+export default CrtSwtich;
diff --git a/src/components/LanguageSwitch.tsx b/src/components/LanguageSwitch.tsx
@@ -0,0 +1,58 @@
+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 {language, setLanguage} = useLanguageContext();
+
+    let l1:string
+    let l2:string
+
+    if(language == 'English')
+    {
+        l1 = 'ENGLISH'
+        l2 = 'SPANISH'
+    }
+    else if(language == 'Spanish')
+    {
+        l1 = 'INGLÉS'
+        l2 = 'ESPAÑOL'
+    }
+    else
+    {
+        l1 = ''
+        l2 = ''
+    }
+
+    const changeState = (language:string) => {
+        setLanguage(language);
+      };
+      console.log(language) //TODO delete this line
+
+    return (
+        <section className={styles.languageSwitchContainer}>
+            <section className={styles.section}>
+                <input
+                    className={styles.checkbox}
+                    type="radio"
+                    name='language'
+                    onClick={() => changeState('English')}
+                    />
+                <label style={vt323.style} htmlFor="">{l1}</label>
+            </section>
+            <section className={styles.section}>
+                <input
+                    className={styles.checkbox}
+                    type="radio"
+                    id='language'
+                    name='language'
+                    onClick={() => changeState('Spanish')}
+                />
+                <label style={vt323.style} htmlFor="language" id='label'>{l2}</label>
+            </section>
+        </section>
+    )
+};
+
+export default Typewriter;