From b1c8e70ab9183ca2ae8038b5c08bd5280bbed595 Mon Sep 17 00:00:00 2001
From: Gabriel372 <gabriel-dobt@hotmail.com>
Date: Fri, 26 Apr 2024 14:12:14 -0300
Subject: [PATCH] update

---
 src/components/AboutMe.tsx             |  1 -
 src/components/CatalogProject.tsx      | 27 ++++++-----
 src/components/MyProjects.tsx          |  8 ---
 src/components/MyTechs.tsx             | 23 ++++-----
 src/components/MyTechsForMobile.tsx    | 67 +++++++++++---------------
 src/components/RegistMemberProject.tsx | 29 ++++++-----
 src/pages/Footer.tsx                   |  7 ++-
 src/pages/Header.tsx                   |  6 +--
 8 files changed, 76 insertions(+), 92 deletions(-)

diff --git a/src/components/AboutMe.tsx b/src/components/AboutMe.tsx
index 415254f..d9d1a87 100644
--- a/src/components/AboutMe.tsx
+++ b/src/components/AboutMe.tsx
@@ -72,7 +72,6 @@ WhatsApp</Link>
 
 
 </div>
-<button onClick={()=>console.log(ThemeIsDark)}>teste 222</button>
 </section>)    
 }
 
diff --git a/src/components/CatalogProject.tsx b/src/components/CatalogProject.tsx
index eaafbfa..648939b 100644
--- a/src/components/CatalogProject.tsx
+++ b/src/components/CatalogProject.tsx
@@ -8,14 +8,19 @@ import { SiFirebase } from "react-icons/si";
 import Link from 'next/link';
 import { TbWorldWww } from "react-icons/tb";
 import { FaGithub } from "react-icons/fa";
-import { TstateModalProject } from '@/types/Types';
+import { TstateModalProject,TstateTheme } from '@/types/Types';
+import { useContext } from 'react';
+import { MyContext } from '@/context/MyContext';
 
 function catalogProject({Modal,setModal}:TstateModalProject) {
-const StyleForTechs = 'bg-gray-200 pb-1 px-1 rounded-lg flex flex-row max-w-26 items-center'  
-    
+const StyleForTechs = ' pb-1 px-1 rounded-lg flex flex-row max-w-26 items-center'  
+const {ThemeIsDark} = useContext(MyContext) as TstateTheme ;
+const ThemeForComponent = ThemeIsDark ? 'text-white bg-gray-800 duration-500  border-gray-700'
+:'duration-500 bg-white  from-gray-600 to-white bg-slate-100 border-gray-100 ' ;   
+const TheForTech = ThemeIsDark ? 'bg-slate-900':
+'bg-gray-200' ;
 
-
-return (<li className=' max-w-[400px] bg-slate-100 rounded-2xl border-gray-200 border px-1 py-3 shadow-2xl transform transition-transform duration-200 hover:-translate-y-1 '>
+return (<li className={`${ThemeForComponent} max-w-[400px]  rounded-2xl  border px-1 py-3 shadow-2xl transform transition-transform duration-200 hover:-translate-y-1`}>
 
 <div>
 
@@ -43,20 +48,20 @@ que são exibidos na página inicial. Eles também podem adicionar um título pa
 </div>
 
 <div className='mt-4 flex flex-wrap text-lg gap-1'><b className=''>Tecnologias utilizadas:</b>
-<span className={`${StyleForTechs}`}><FaReact className=' mr-[2px]'/> React Js</span>
-<span className={`${StyleForTechs}`}><SiTypescript className=' mr-[2px]'/> Typescript</span>
-<span className={`${StyleForTechs}`}><SiTailwindcss className=' mr-[2px]'/> Tailwind</span>
-<span className={`${StyleForTechs}`}><SiFirebase className=' mr-[2px]'/> Firebase</span>
+<span className={`${StyleForTechs} ${TheForTech} `}><FaReact className=' mr-[2px]'/> React Js</span>
+<span className={`${StyleForTechs} ${TheForTech}`}><SiTypescript className=' mr-[2px]'/> Typescript</span>
+<span className={`${StyleForTechs} ${TheForTech}`}><SiTailwindcss className=' mr-[2px]'/> Tailwind</span>
+<span className={`${StyleForTechs} ${TheForTech}`}><SiFirebase className=' mr-[2px]'/> Firebase</span>
 </div>
 
 <div className=' flex flex-row justify-around mt-4'>
 
 <Link href='https://gabriel372.github.io/catalogo-de-produtos/'
-className=' bg-black text-white rounded-lg px-2 flex flex-row items-center max-w-36 py-2 justify-center w-full hover:bg-gray-700'>
+className=' bg-black text-white rounded-lg px-2 flex flex-row items-center max-w-36 py-2 justify-center w-full hover:bg-gray-700 border border-gray-700'>
 <TbWorldWww className=' mr-[2px] text-xl'/>Ver site</Link>
 
 <Link href='https://github.com/Gabriel372/catalogo-de-produtos'
-className=' bg-black text-white rounded-lg px-2 flex flex-row items-center py-2 justify-center max-w-36 w-full hover:bg-gray-700'>
+className=' bg-black text-white rounded-lg px-2 flex flex-row items-center py-2 justify-center w-full hover:bg-gray-700 max-h-11 border border-gray-700 max-w-40'>
 <FaGithub className=' mr-[2px] text-xl'/>Ver repositório</Link>
 
 </div>
diff --git a/src/components/MyProjects.tsx b/src/components/MyProjects.tsx
index 43ef517..1557bc1 100644
--- a/src/components/MyProjects.tsx
+++ b/src/components/MyProjects.tsx
@@ -19,14 +19,6 @@ return (<section className=' flex flex-col justify-around mb-8'>
 </ul>
 
 <ModalProject Modal={Modal} setModal={setModal}/>
-   {/* <ModalProject Modal={Modal} setModal={setModal}/> */}
-
-{/* <div className=' fixed w-full h-full top-0 flex justify-center items-center   left-0 bg-custom-black'>
-    <div className=' h-10 w-10 bg-green-500'></div>
-    
-    aaaaaaa</div> */}
-
-
 </section> 
 
 )
diff --git a/src/components/MyTechs.tsx b/src/components/MyTechs.tsx
index d1285ce..75ba76d 100644
--- a/src/components/MyTechs.tsx
+++ b/src/components/MyTechs.tsx
@@ -16,24 +16,21 @@ import { TstateTheme } from '@/types/Types'
 
 function MyTechs() {
     const {ThemeIsDark} = useContext(MyContext) as TstateTheme ;
-const StyleForLi = 'cursor-pointer flex flex-col rounded-t-xl px-2 pb-1  shadow-2xl border ml-3 '
 const [TechClicked,setTechClicked] = useState<string>('react') ;
+
+const StyleForLi = 'cursor-pointer flex flex-col rounded-t-xl px-2 pb-1  shadow-2xl border ml-3 '
 const ThemeForComponent = ThemeIsDark ? 'text-white bg-gray-800 duration-500 bg-gray-500 border-x-gray-500  border-b-gray-700'
 :'duration-500 bg-white  from-gray-600 to-white bg-gray-200 border-x-gray-300 border-t-gray-300 border-b-gray-300'
-//<p className={`max-w-[1020px]  shadow-2xl border ml-3 rounded-b-xl text-lg p-1 w-full border-x-gray-300 border-b-gray-300 border-t-0 pt-2 min-h-[150px]`}>
-
 
-const StyleLigth = TechClicked === 'react' ? 'bg-white border-b-0 ' : 'bg-gray-200  border-b-gray-300'
-const StyleDark = TechClicked === 'react' ? 'bg-white border-b-0 ' : 'bg-gray-200  border-b-gray-300'
+function CatchTechGiveStyle (tech:string ){
+    if (ThemeIsDark) {
+    return (tech === TechClicked ? 'bg-gray-800 border-b-0 ' : 'bg-gray-900  border-gray-500 border-b-gray-500' ) 
+    }
+    else {
+    return (tech === TechClicked ? 'bg-white border-b-0 ' : 'bg-gray-200  border-b-gray-300' ) 
+    }
+    }
 
-function CatchTechGiveStyle(tech:string) {
-if (ThemeIsDark) {
-return (tech === TechClicked ? 'bg-gray-800 border-b-0 ' : 'bg-gray-900  border-gray-500' ) 
-}
-else {
-return (tech === TechClicked ? 'bg-white border-b-0 ' : 'bg-gray-200  border-b-gray-300' ) 
-}
-}
 
 function ReturnText() {
 return (TechClicked === 'react' && ReactText) ||
diff --git a/src/components/MyTechsForMobile.tsx b/src/components/MyTechsForMobile.tsx
index afaa713..0671a39 100644
--- a/src/components/MyTechsForMobile.tsx
+++ b/src/components/MyTechsForMobile.tsx
@@ -1,5 +1,4 @@
-import { useState  } from "react"
-import { Ttech } from "@/types/Types"
+import { useState,useContext  } from "react"
 import Image from 'next/image'
 import ReactImg from '../images/react3d.webp'
 import TypescriptImg from '../images/ts3d.webp'
@@ -12,30 +11,18 @@ import Htmlimg from '../images/html3d.png'
 import GitImg from '../images/git3d.webp'
 import FirebaseImg from '../images/firebaseLogo.png'
 import { ReactText,TypescriptText,NextText,TailwindText,CssText,HtmlText,GitText,GithubText,FirebaseText,BoostrapText,JavascriptText } from './Content'
+import { MyContext } from "@/context/MyContext"
+import { TstateTheme } from "@/types/Types"
 
 function MyTechsForMobile() {
 const StyleForLi = `cursor-pointer flex flex-col rounded-xl px-2 pb-1  shadow-2xl border   
 w-screen550:text-sm  w-screen450:text-[11px] w-screen550:px-1 w-screen550:rounded-md justify-center items-center` 
 const StyleForImg = 'max-w-14 w-screen500:max-w-10'
 const [TechClicked,setTechClicked] = useState<string>('react')
+const {ThemeIsDark} = useContext(MyContext) as TstateTheme ;
+const ThemeForComponent = ThemeIsDark ? 'text-white bg-gray-800 duration-500  border-gray-700'
+:'duration-500 bg-white  from-gray-600 to-white bg-gray-200 border-x-gray-300 border-t-gray-300 border-b-gray-300' ;
 
-// const [TechClicked,setTechClicked] = useState<Ttech>({group1:'react',group2:'javascript'})
-
-// function ReturnTextForGroup1() {
-// return (TechClicked.group1 === 'react' && ReactText) ||
-// (TechClicked.group1 === 'typescript' && TypescriptText) ||
-// (TechClicked.group1 === 'next' && NextText) ||
-//  (TechClicked.group1 === 'tailwind' && TailwindText) ||
-// (TechClicked.group1 === 'bootstrap' && BoostrapText)
-// }
-
-// function ReturnTextForGroup2() {
-//     return (TechClicked.group2 === 'javascript' && JavascriptText) ||
-//     (TechClicked.group2 === 'css' && CssText) ||
-//     (TechClicked.group2 === 'html' && HtmlText) ||
-//      (TechClicked.group2 === 'git' && GitText) ||
-//     (TechClicked.group2 === 'firebase' && FirebaseText)
-// }
 function ReturnText() {
     return (TechClicked === 'react' && ReactText) ||
         (TechClicked === 'typescript' && TypescriptText) ||
@@ -47,8 +34,15 @@ function ReturnText() {
         (TechClicked === 'html' && HtmlText) ||
         (TechClicked === 'git' && GitText) ||
         (TechClicked === 'firebase' && FirebaseText)
+}
+function CatchTechGiveStyle (tech:string ){
+    if (ThemeIsDark) {
+    return (tech === TechClicked ? 'bg-gray-700' : 'bg-gray-900  border-gray-500' ) 
+    }
+    else {
+    return (tech === TechClicked ? 'bg-white border-b-0 ' : 'bg-gray-200  border-b-gray-300' ) 
+    }
     }
-
 
 return (
 <section className=' mt-4 hidden w-screen1050:flex flex-col mb-2'>
@@ -56,53 +50,53 @@ return (
         
 <div className=' flex flex-col w-full items-center'>
         
-<ul className=' flex  w-full justify-center flex-wrap gap-2'>
+<ul className=' flex  w-full justify-center flex-wrap gap-2 mb-2'>
         
-<li className={`${StyleForLi} ${TechClicked === 'react' ? 'bg-white border-black ' : 'bg-gray-200  border-b-gray-300'}`} 
+<li className={`${StyleForLi} ${CatchTechGiveStyle('react')}`} 
 onClick={()=> setTechClicked('react') }><b className=''
  >React js</b>
 <Image src={ReactImg} alt='image'   className={`${StyleForImg}`}/>
 </li>
         
- <li className={`${StyleForLi} ${TechClicked === 'typescript' ? 'bg-white border-black ' : 'bg-gray-200  border-b-gray-300'}`} 
+ <li className={`${StyleForLi} ${CatchTechGiveStyle('typescript')}`} 
 onClick={()=> setTechClicked('typescript') }><b>Typescript</b>
 <Image src={TypescriptImg} alt='image'  className={`${StyleForImg}`}/></li>
         
-<li className={`${StyleForLi} ${TechClicked === 'next' ? 'bg-white border-black ': 'bg-gray-200  border-b-gray-300'}`}
+<li className={`${StyleForLi} ${CatchTechGiveStyle('next')}`}
 onClick={()=> setTechClicked('next') }><b>Next js</b>
   <Image src={NextImg} alt='image'  className={`${StyleForImg}`}/></li>
         
-   <li className={`${StyleForLi} ${TechClicked === 'tailwind' ? 'bg-white border-black ' : 'bg-gray-200  border-b-gray-300'}`} 
+   <li className={`${StyleForLi} ${CatchTechGiveStyle('tailwind')}`} 
 onClick={()=> setTechClicked('tailwind') }><b>Tailwind</b>
 <Image src={TailwindImg} alt='image'   className={`${StyleForImg}`}/></li>
         
-<li className={`${StyleForLi} ${TechClicked === 'bootstrap' ? 'bg-white border-black ' : 'bg-gray-200  border-b-gray-300'}`} 
+<li className={`${StyleForLi} ${CatchTechGiveStyle('bootstrap')}`} 
 onClick={()=> setTechClicked('bootstrap') }><b>Bootstrap</b>
 <Image src={BootstrapImg} alt='image' className={`${StyleForImg}`}/></li>
 
-<li className={`${StyleForLi} ${TechClicked === 'javascript' ? 'bg-white border-black ' : 'bg-gray-200  border-b-gray-300'} `} 
+<li className={`${StyleForLi} ${CatchTechGiveStyle('javascript')} `} 
 onClick={()=> setTechClicked('javascript') }><b>Javascript</b>
  <Image src={JavascriptImg} alt='image'   className={`${StyleForImg}`}/></li>
         
-<li className={`${StyleForLi} ${TechClicked === 'css' ? 'bg-white border-black ' : 'bg-gray-200  border-b-gray-300'} `} 
+<li className={`${StyleForLi} ${CatchTechGiveStyle('css')} `} 
 onClick={()=> setTechClicked('css') }><b>Css 3</b>
 <Image src={CssImg} alt='image'  className={`${StyleForImg}`}/></li>
         
- <li className={`${StyleForLi} ${TechClicked === 'html' ? 'bg-white border-black ' : 'bg-gray-200  border-b-gray-300'}`} 
+ <li className={`${StyleForLi} ${CatchTechGiveStyle('html')}`} 
 onClick={()=> setTechClicked('html') }><b>Html 5</b>
  <Image src={Htmlimg} alt='image' className={`${StyleForImg}`}/></li>
         
-<li className={`${StyleForLi} ${TechClicked === 'git' ? 'bg-white border-black ' : 'bg-gray-200  border-b-gray-300'}`} 
+<li className={`${StyleForLi} ${CatchTechGiveStyle('git')}`} 
 onClick={()=> setTechClicked('git') }><b>Git/Github</b>
 <Image src={GitImg} alt='image' className={`${StyleForImg}`}/></li>
         
- <li className={`${StyleForLi} ${TechClicked === 'firebase' ? 'bg-white border-black ' : 'bg-gray-200  border-b-gray-300'}`} 
+ <li className={`${StyleForLi} ${CatchTechGiveStyle('firebase')}`} 
 onClick={()=> setTechClicked('firebase') }><b>Firebase</b>
  <Image src={FirebaseImg} alt='image' className={`${StyleForImg}`}/></li>       
 
 </ul>
 
-<p className='  bg-white border rounded-xl text-lg p-1 w-full border-gray-200 pt-2 min-h-[240px] mb-3 shadow-2xl mt-2'>
+<p className={`${ThemeForComponent}   border rounded-xl text-lg p-1 w-full pt-2 min-h-[240px] mb-3 shadow-2xl mt-2'`}>
  {`${ReturnText()}`}   
  {TechClicked === 'git' && <p>{GithubText}</p> } 
 
@@ -110,15 +104,8 @@ onClick={()=> setTechClicked('firebase') }><b>Firebase</b>
 
 <ul className=' flex  flex-row max-w-[500px] w-full justify-end'>
 
-
-
 </ul>
-    
- {/* <p className='max-w-[500px]  bg-white shadow-3xl border rounded-b-xl text-lg p-1 w-full border-x-gray-300 border-b-gray-300 border-t-0 pt-2 min-h-[240px] shadow-2xl'>
- {`${ReturnTextForGroup2()}`}   
-{TechClicked.group2 === 'git' && <p>{GithubText}</p> } 
-</p> */}
-        
+      
 </div>
         
  </section>
diff --git a/src/components/RegistMemberProject.tsx b/src/components/RegistMemberProject.tsx
index 726718f..ea01be2 100644
--- a/src/components/RegistMemberProject.tsx
+++ b/src/components/RegistMemberProject.tsx
@@ -9,16 +9,19 @@ import Link from 'next/link';
 import { TbWorldWww } from "react-icons/tb";
 import { FaGithub } from "react-icons/fa";
 import { FaCss3Alt } from "react-icons/fa";
-import { TstateModalProject } from '@/types/Types';
-
-
+import { TstateModalProject,TstateTheme } from '@/types/Types';
+import { useContext } from 'react';
+import { MyContext } from '@/context/MyContext';
 
 function RegistMemberProject({Modal,setModal}:TstateModalProject) {
-    const StyleForTechs = ' bg-gray-200 pb-1 px-1 rounded-lg flex flex-row max-w-26 items-center'  
-
-    
+    const StyleForTechs = ' pb-1 px-1 rounded-lg flex flex-row max-w-26 items-center'  
+    const {ThemeIsDark} = useContext(MyContext) as TstateTheme ;
+    const ThemeForComponent = ThemeIsDark ? 'text-white bg-gray-800 duration-500  border-gray-700'
+    :'duration-500 bg-white  from-gray-600 to-white bg-slate-100 border-gray-100 ' ; 
+    const TheForTech = ThemeIsDark ? 'bg-slate-900':
+    'bg-gray-200' ;  
 
-return (<li className='  max-w-[400px] bg-slate-100 rounded-2xl border-gray-200 border px-1 py-3 shadow-2xl transform transition-transform duration-200 hover:-translate-y-1 '>
+    return (<li className={`${ThemeForComponent} max-w-[400px]  rounded-2xl  border px-1 py-3 shadow-2xl transform transition-transform duration-200 hover:-translate-y-1`}>
 
     <div>
     
@@ -45,20 +48,20 @@ return (<li className='  max-w-[400px] bg-slate-100 rounded-2xl border-gray-200
     </div>
     
     <div className='mt-4 flex flex-wrap text-lg gap-1'><b className=''>Tecnologias utilizadas:</b>
-    <span className={`${StyleForTechs}`}><FaReact className=' mr-[2px]'/> React Js</span>
-    <span className={`${StyleForTechs}`}><SiTypescript className=' mr-[2px] '/> Typescript</span>
-    <span className={`${StyleForTechs}`}><FaCss3Alt className=' mr-[2px]'/> Css</span>
-    <span className={`${StyleForTechs}`}><SiFirebase className=' mr-[2px]'/> Firebase</span>
+    <span className={`${StyleForTechs} ${TheForTech}`}><FaReact className=' mr-[2px]'/> React Js</span>
+    <span className={`${StyleForTechs} ${TheForTech}`}><SiTypescript className=' mr-[2px] '/> Typescript</span>
+    <span className={`${StyleForTechs} ${TheForTech}`}><FaCss3Alt className=' mr-[2px]'/> Css</span>
+    <span className={`${StyleForTechs} ${TheForTech}`}><SiFirebase className=' mr-[2px]'/> Firebase</span>
     </div>
     
     <div className=' mt-4 flex flex-row justify-around'>
     
     <Link href='https://gabriel372.github.io/cadastro-de-membros/'
-    className=' bg-black text-white rounded-lg px-2 flex flex-row items-center max-w-36 py-2 justify-center w-full hover:bg-gray-700'>
+    className=' bg-black text-white rounded-lg px-2 flex flex-row items-center max-w-36 py-2 justify-center w-full hover:bg-gray-700 border border-gray-700'>
     <TbWorldWww className=' mr-[2px] text-xl'/>Ver site</Link>
     
     <Link href='https://github.com/Gabriel372/cadastro-de-membros'
-    className=' bg-black text-white rounded-lg px-2 flex flex-row items-center py-2 justify-center max-w-36 w-full hover:bg-gray-700'>
+    className=' bg-black text-white rounded-lg px-2 flex flex-row items-center py-2 justify-center w-full hover:bg-gray-700 max-h-11 border border-gray-700 max-w-40'>
     <FaGithub className=' mr-[2px] text-xl'/>Ver repositório</Link>
     
     </div>
diff --git a/src/pages/Footer.tsx b/src/pages/Footer.tsx
index 4bfdc4f..9bf1b3c 100644
--- a/src/pages/Footer.tsx
+++ b/src/pages/Footer.tsx
@@ -1,7 +1,12 @@
+import { useContext } from "react";
+import { MyContext } from "@/context/MyContext";
+import { TstateTheme } from "@/types/Types";
 
 function Footer() {
+    const {ThemeIsDark} = useContext(MyContext) as TstateTheme ;
+    const ThemeForComponent = ThemeIsDark ? 'text-white bg-gray-800 duration-500':'duration-500 bg-gradient-to-t from-gray-600 to-white'
     
-return (<footer className="bg-gradient-to-t from-gray-600 to-white">
+return (<footer className={`${ThemeForComponent} `}>
 <nav className=" flex justify-around w-full h-16 items-center">
 Gabriel Brandão 2024
     </nav>
diff --git a/src/pages/Header.tsx b/src/pages/Header.tsx
index 40a0879..adbbcc9 100644
--- a/src/pages/Header.tsx
+++ b/src/pages/Header.tsx
@@ -7,15 +7,11 @@ import { TstateTheme } from "@/types/Types";
 
 function Header() {
 const {ThemeIsDark} = useContext(MyContext) as TstateTheme ;
-const ThemeForComponent = ThemeIsDark ? 'text-white bg-neutral-800 duration-500':'duration-500 bg-gradient-to-b from-gray-600 to-white'
-
-
+const ThemeForComponent = ThemeIsDark ? 'text-white bg-gray-800 duration-500 border-b-gray-600 border border-t-0':'duration-500 bg-gradient-to-b from-gray-600 to-white'
 
 return (<header className={`${ThemeForComponent} dura`}>
 <nav className=" flex justify-around w-full h-16 items-center ">
     <BtnToggleMode/>
-    {/* <Link href="/" ><span className=" ">Home</span></Link>
-    <Link href="/Todo"><span className="">Todo</span></Link>  */}
     </nav>
 
 </header>)