Skip to content

Commit 39a0676

Browse files
dc7devsdc7devs
committed
button toggle theme in modal
1 parent bda177a commit 39a0676

4 files changed

Lines changed: 12 additions & 48 deletions

File tree

‎src/components/modal.tsx‎

Lines changed: 2 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,10 @@
1-
import { Link } from "phosphor-react";
2-
import { useTheme } from "next-themes";
1+
import ToggleThemeBtn from "./toggle-dark-theme-btn";
32

43
export default function Modal() {
5-
const {theme, setTheme} = useTheme()
64

75
return (
86
<div className="fixed top-0 left-0 w-screen h-screen bg-white/10 dark:bg-black/10 backdrop-blur-sm z-40 transition-opacity ease-in-out">
9-
<div>
10-
<button
11-
onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
12-
>
13-
Mudar Tema
14-
</button>
15-
</div>
7+
<ToggleThemeBtn />
168
</div>
179
)
1810
}

‎src/components/navbar.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ export default function NavBar({
5353
}
5454
</button>
5555

56-
<ToggleThemeBtn />
56+
<ToggleThemeBtn hasAnimation />
5757
</nav>
5858
)
5959
}

‎src/components/toggle-dark-theme-btn.tsx‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,20 @@
11
import { useTheme } from "next-themes";
22
import { CircleDashed, MoonStars, SunDim } from "phosphor-react";
3-
import { useState, useEffect } from "react";
3+
import { useState, useEffect, useLayoutEffect } from "react";
44
import cx from "clsx";
55

6-
export default function ToggleThemeBtn() {
6+
interface Props {
7+
hasAnimation?: boolean
8+
}
9+
10+
export default function ToggleThemeBtn({ hasAnimation=false }: Props) {
711
const [mounted, setMounted] = useState(false);
812
const {theme, setTheme} = useTheme();
913
const [effect, setEffect] = useState(false);
1014

1115
useEffect(() => {
1216
setMounted(true);
13-
setEffect(true);
17+
setEffect(hasAnimation);
1418
}, [])
1519

1620
function isDark() {return theme == "dark"}

‎src/pages/about.tsx‎

Lines changed: 2 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -3,40 +3,8 @@ import Layout from "../components/layout";
33
export default function About() {
44
return (
55
<Layout>
6-
<h1 className="text-4xl pb-5">Pagina sobre</h1>
7-
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum, dolorem aut ea numquam veritatis, cum recusandae voluptates, aliquam provident nostrum perspiciatis dolorum voluptas quae. Nihil perferendis enim laborum velit doloremque?</p>
8-
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum, dolorem aut ea numquam veritatis, cum recusandae voluptates, aliquam provident nostrum perspiciatis dolorum voluptas quae. Nihil perferendis enim laborum velit doloremque?</p>
9-
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum, dolorem aut ea numquam veritatis, cum recusandae voluptates, aliquam provident nostrum perspiciatis dolorum voluptas quae. Nihil perferendis enim laborum velit doloremque?</p>
10-
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum, dolorem aut ea numquam veritatis, cum recusandae voluptates, aliquam provident nostrum perspiciatis dolorum voluptas quae. Nihil perferendis enim laborum velit doloremque?</p>
11-
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum, dolorem aut ea numquam veritatis, cum recusandae voluptates, aliquam provident nostrum perspiciatis dolorum voluptas quae. Nihil perferendis enim laborum velit doloremque?</p>
12-
13-
<br />
14-
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum, dolorem aut ea numquam veritatis, cum recusandae voluptates, aliquam provident nostrum perspiciatis dolorum voluptas quae. Nihil perferendis enim laborum velit doloremque?</p>
15-
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum, dolorem aut ea numquam veritatis, cum recusandae voluptates, aliquam provident nostrum perspiciatis dolorum voluptas quae. Nihil perferendis enim laborum velit doloremque?</p>
16-
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum, dolorem aut ea numquam veritatis, cum recusandae voluptates, aliquam provident nostrum perspiciatis dolorum voluptas quae. Nihil perferendis enim laborum velit doloremque?</p>
17-
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum, dolorem aut ea numquam veritatis, cum recusandae voluptates, aliquam provident nostrum perspiciatis dolorum voluptas quae. Nihil perferendis enim laborum velit doloremque?</p>
18-
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum, dolorem aut ea numquam veritatis, cum recusandae voluptates, aliquam provident nostrum perspiciatis dolorum voluptas quae. Nihil perferendis enim laborum velit doloremque?</p>
19-
20-
<br />
21-
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum, dolorem aut ea numquam veritatis, cum recusandae voluptates, aliquam provident nostrum perspiciatis dolorum voluptas quae. Nihil perferendis enim laborum velit doloremque?</p>
22-
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum, dolorem aut ea numquam veritatis, cum recusandae voluptates, aliquam provident nostrum perspiciatis dolorum voluptas quae. Nihil perferendis enim laborum velit doloremque?</p>
23-
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum, dolorem aut ea numquam veritatis, cum recusandae voluptates, aliquam provident nostrum perspiciatis dolorum voluptas quae. Nihil perferendis enim laborum velit doloremque?</p>
24-
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum, dolorem aut ea numquam veritatis, cum recusandae voluptates, aliquam provident nostrum perspiciatis dolorum voluptas quae. Nihil perferendis enim laborum velit doloremque?</p>
25-
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum, dolorem aut ea numquam veritatis, cum recusandae voluptates, aliquam provident nostrum perspiciatis dolorum voluptas quae. Nihil perferendis enim laborum velit doloremque?</p>
26-
27-
<br />
28-
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum, dolorem aut ea numquam veritatis, cum recusandae voluptates, aliquam provident nostrum perspiciatis dolorum voluptas quae. Nihil perferendis enim laborum velit doloremque?</p>
29-
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum, dolorem aut ea numquam veritatis, cum recusandae voluptates, aliquam provident nostrum perspiciatis dolorum voluptas quae. Nihil perferendis enim laborum velit doloremque?</p>
30-
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum, dolorem aut ea numquam veritatis, cum recusandae voluptates, aliquam provident nostrum perspiciatis dolorum voluptas quae. Nihil perferendis enim laborum velit doloremque?</p>
31-
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum, dolorem aut ea numquam veritatis, cum recusandae voluptates, aliquam provident nostrum perspiciatis dolorum voluptas quae. Nihil perferendis enim laborum velit doloremque?</p>
32-
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum, dolorem aut ea numquam veritatis, cum recusandae voluptates, aliquam provident nostrum perspiciatis dolorum voluptas quae. Nihil perferendis enim laborum velit doloremque?</p>
33-
34-
<br />
35-
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum, dolorem aut ea numquam veritatis, cum recusandae voluptates, aliquam provident nostrum perspiciatis dolorum voluptas quae. Nihil perferendis enim laborum velit doloremque?</p>
36-
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum, dolorem aut ea numquam veritatis, cum recusandae voluptates, aliquam provident nostrum perspiciatis dolorum voluptas quae. Nihil perferendis enim laborum velit doloremque?</p>
37-
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum, dolorem aut ea numquam veritatis, cum recusandae voluptates, aliquam provident nostrum perspiciatis dolorum voluptas quae. Nihil perferendis enim laborum velit doloremque?</p>
38-
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum, dolorem aut ea numquam veritatis, cum recusandae voluptates, aliquam provident nostrum perspiciatis dolorum voluptas quae. Nihil perferendis enim laborum velit doloremque?</p>
39-
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum, dolorem aut ea numquam veritatis, cum recusandae voluptates, aliquam provident nostrum perspiciatis dolorum voluptas quae. Nihil perferendis enim laborum velit doloremque?</p>
6+
<p className={"leading-loose"}><strong className={"font-bold"}>Desenvolvedor de sistemas</strong>, estudante de programação 👨‍🎓,</p>
7+
<p>interessado em conhecer e sempre aprender novas tecnologias.</p>
408
</Layout>
419
)
4210
}

0 commit comments

Comments
 (0)