Skip to content

Commit 3aaec81

Browse files
dc7devsdc7devs
committed
Added clx in src/components/navbar.tsx file
1 parent e3024f7 commit 3aaec81

11 files changed

Lines changed: 117 additions & 63 deletions

File tree

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
"@types/node": "18.11.11",
1313
"@types/react": "18.0.26",
1414
"@types/react-dom": "18.0.9",
15+
"clsx": "^1.2.1",
1516
"eslint": "8.29.0",
1617
"eslint-config-next": "13.0.6",
1718
"next": "13.0.6",

‎src/components/header.tsx‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,14 @@ export default function Header() {
77
const [isOpenedModal, setIsOpenedModal] = useState(false);
88

99
return(
10-
<header className="h-auto w-full pt-4 flex justify-between items-center px-8 md:px-0 md:justify-around md:h-16 absolute top-0">
10+
<header className={"h-auto w-full pt-4 flex justify-between items-center px-8 md:px-0 md:justify-around md:h-16 absolute top-0"}>
1111
<Link href="/">
12-
<div className="w-10 h-10 md:w-12 md:h-12 rounded-full ring-4 ring-violet-700/5 shadow-sm shadow-violet-700/10 bakcdrop-blur relative select-none">
13-
<img className="object-cove rounded-full" src="/images/My.png" alt="Althor image" />
12+
<div className={"w-10 h-10 md:w-12 md:h-12 rounded-full ring-4 ring-violet-700/5 shadow-sm shadow-violet-700/10 bakcdrop-blur relative select-none"}>
13+
<img
14+
className={"object-cove rounded-full"}
15+
src="/images/My.png"
16+
alt="Althor image"
17+
/>
1418
</div>
1519
</Link>
1620

‎src/components/layout.tsx‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import Link from "next/link"
44
import { ReactNode } from "react"
55
import Header from "./header"
66
import NextProgress from "next-progress"
7+
import cx from "clsx"
78

89
interface PropsChildren {
910
children: ReactNode
@@ -16,34 +17,33 @@ export default function Layout({ children }: PropsChildren) {
1617
return (
1718
<div className="h-screen w-full font-pontserrat">
1819
<Head>
19-
<title>{router.pathname != "/" ? `${router.pathname.slice(1).toLowerCase()} - ` : ""}Diego Silva</title>
20-
<meta name="description" content="Generated by create next app" />
20+
<title>{cx(router.pathname != "/" ? router.pathname.slice(1).toLowerCase()+" - " : "")}Diego Silva</title>
2121
<link rel="icon" href="/favicon.png" />
2222
</Head>
2323
<NextProgress color="rgb(139 92 246)" delay={500} />
2424

2525
<Header />
2626

2727
<main className="w-full h-full pt-16 sm:pt-24">
28-
<div className={`px-4 py-7 sm:p-y sm:pr-0 sm:w-4/5 h-full mx-auto overflow-y-auto relative ${checkRouter ? "" : "md:border-l-[2.8px] border-dashed border-black/25 dark:border-white/25"}`}>
28+
<div className={cx("px-4 py-7 sm:p-y sm:pr-0 sm:w-4/5 h-full mx-auto overflow-y-auto relative", checkRouter ? "" : "md:border-l-[2.8px] border-dashed border-black/25 dark:border-white/25")}>
2929
{children}
30-
<div className={`hidden sm:block ${checkRouter ? "sm:absolute sm:bottom-4 sm:right-2 lg:absolute lg:bottom-10 lg:left-0" : "sm:absolute sm:bottom-4 sm:right-2 lg:fixed lg:top-1/2 lg:bottom-1/2 lg:right-[91%]"}`}>
31-
<ul className={`flex gap-3 md:gap-4 ${checkRouter ? "sm:flex-row" : "sm:flex-row lg:flex-col"} items-center`}>
30+
<div className={cx("hidden sm:block", checkRouter ? "sm:absolute sm:bottom-4 sm:right-2 lg:bottom-10 lg:left-0" : "sm:fixed sm:top-1/2 sm:bottom-1/2 sm:right-[91%]")}>
31+
<ul className={cx("flex gap-3 md:gap-4", checkRouter ? "sm:flex-row" : "sm:flex-col", "items-center")}>
3232
<li>
3333
<Link href="https://github.com/dc7devs" target="__blank">
34-
<svg viewBox="0 0 24 24" aria-hidden="true" className="h-7 w-7 fill-zinc-500 transition hover:fill-zinc-600 dark:fill-zinc-400 dark:hover:fill-zinc-300"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C6.475 2 2 6.588 2 12.253c0 4.537 2.862 8.369 6.838 9.727.5.09.687-.218.687-.487 0-.243-.013-1.05-.013-1.91C7 20.059 6.35 18.957 6.15 18.38c-.113-.295-.6-1.205-1.025-1.448-.35-.192-.85-.667-.013-.68.788-.012 1.35.744 1.538 1.051.9 1.551 2.338 1.116 2.912.846.088-.666.35-1.115.638-1.371-2.225-.256-4.55-1.14-4.55-5.062 0-1.115.387-2.038 1.025-2.756-.1-.256-.45-1.307.1-2.717 0 0 .837-.269 2.75 1.051.8-.23 1.65-.346 2.5-.346.85 0 1.7.115 2.5.346 1.912-1.333 2.75-1.05 2.75-1.05.55 1.409.2 2.46.1 2.716.637.718 1.025 1.628 1.025 2.756 0 3.934-2.337 4.806-4.562 5.062.362.32.675.936.675 1.897 0 1.371-.013 2.473-.013 2.82 0 .268.188.589.688.486a10.039 10.039 0 0 0 4.932-3.74A10.447 10.447 0 0 0 22 12.253C22 6.588 17.525 2 12 2Z"></path></svg>
34+
<svg viewBox="0 0 24 24" aria-hidden="true" className="h-7 w-7 fill-zinc-500 transition hover:fill-zinc-600 dark:fill-zinc-400 dark:hover:fill-zinc-300"><path fillRule="evenodd" clipRule="evenodd" d="M12 2C6.475 2 2 6.588 2 12.253c0 4.537 2.862 8.369 6.838 9.727.5.09.687-.218.687-.487 0-.243-.013-1.05-.013-1.91C7 20.059 6.35 18.957 6.15 18.38c-.113-.295-.6-1.205-1.025-1.448-.35-.192-.85-.667-.013-.68.788-.012 1.35.744 1.538 1.051.9 1.551 2.338 1.116 2.912.846.088-.666.35-1.115.638-1.371-2.225-.256-4.55-1.14-4.55-5.062 0-1.115.387-2.038 1.025-2.756-.1-.256-.45-1.307.1-2.717 0 0 .837-.269 2.75 1.051.8-.23 1.65-.346 2.5-.346.85 0 1.7.115 2.5.346 1.912-1.333 2.75-1.05 2.75-1.05.55 1.409.2 2.46.1 2.716.637.718 1.025 1.628 1.025 2.756 0 3.934-2.337 4.806-4.562 5.062.362.32.675.936.675 1.897 0 1.371-.013 2.473-.013 2.82 0 .268.188.589.688.486a10.039 10.039 0 0 0 4.932-3.74A10.447 10.447 0 0 0 22 12.253C22 6.588 17.525 2 12 2Z"></path></svg>
3535
</Link>
3636
</li>
3737

3838
<li>
3939
<Link href="https://www.linkedin.com/in/diego-c-silva-487b171a5/" target="__blank">
40-
<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 1024 1024" height="1em" width="1em" className="h-6 w-6 fill-zinc-500 transition hover:fill-zinc-600 dark:fill-zinc-400 dark:hover:fill-zinc-300" xmlns="http://www.w3.org/2000/svg"><path d="M880 112H144c-17.7 0-32 14.3-32 32v736c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V144c0-17.7-14.3-32-32-32zM349.3 793.7H230.6V411.9h118.7v381.8zm-59.3-434a68.8 68.8 0 1 1 68.8-68.8c-.1 38-30.9 68.8-68.8 68.8zm503.7 434H675.1V608c0-44.3-.8-101.2-61.7-101.2-61.7 0-71.2 48.2-71.2 98v188.9H423.7V411.9h113.8v52.2h1.6c15.8-30 54.5-61.7 112.3-61.7 120.2 0 142.3 79.1 142.3 181.9v209.4z"></path></svg>
40+
<svg stroke="currentColor" fill="currentColor" strokeWidth="0" viewBox="0 0 1024 1024" height="1em" width="1em" className="h-6 w-6 fill-zinc-500 transition hover:fill-zinc-600 dark:fill-zinc-400 dark:hover:fill-zinc-300" xmlns="http://www.w3.org/2000/svg"><path d="M880 112H144c-17.7 0-32 14.3-32 32v736c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V144c0-17.7-14.3-32-32-32zM349.3 793.7H230.6V411.9h118.7v381.8zm-59.3-434a68.8 68.8 0 1 1 68.8-68.8c-.1 38-30.9 68.8-68.8 68.8zm503.7 434H675.1V608c0-44.3-.8-101.2-61.7-101.2-61.7 0-71.2 48.2-71.2 98v188.9H423.7V411.9h113.8v52.2h1.6c15.8-30 54.5-61.7 112.3-61.7 120.2 0 142.3 79.1 142.3 181.9v209.4z"></path></svg>
4141
</Link>
4242
</li>
4343

4444
<li>
4545
<Link href="https://www.youtube.com/channel/UCQCBtV_fonx-JZj-OnIFcSw" target="__blank">
46-
<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 1024 1024" height="1em" width="1em" className="h-6 w-6 fill-zinc-500 transition hover:fill-zinc-600 dark:fill-zinc-400 dark:hover:fill-zinc-300" xmlns="http://www.w3.org/2000/svg"><path d="M941.3 296.1a112.3 112.3 0 0 0-79.2-79.3C792.2 198 512 198 512 198s-280.2 0-350.1 18.7A112.12 112.12 0 0 0 82.7 296C64 366 64 512 64 512s0 146 18.7 215.9c10.3 38.6 40.7 69 79.2 79.3C231.8 826 512 826 512 826s280.2 0 350.1-18.8c38.6-10.3 68.9-40.7 79.2-79.3C960 658 960 512 960 512s0-146-18.7-215.9zM423 646V378l232 133-232 135z"></path></svg>
46+
<svg stroke="currentColor" fill="currentColor" strokeWidth="0" viewBox="0 0 1024 1024" height="1em" width="1em" className="h-6 w-6 fill-zinc-500 transition hover:fill-zinc-600 dark:fill-zinc-400 dark:hover:fill-zinc-300" xmlns="http://www.w3.org/2000/svg"><path d="M941.3 296.1a112.3 112.3 0 0 0-79.2-79.3C792.2 198 512 198 512 198s-280.2 0-350.1 18.7A112.12 112.12 0 0 0 82.7 296C64 366 64 512 64 512s0 146 18.7 215.9c10.3 38.6 40.7 69 79.2 79.3C231.8 826 512 826 512 826s280.2 0 350.1-18.8c38.6-10.3 68.9-40.7 79.2-79.3C960 658 960 512 960 512s0-146-18.7-215.9zM423 646V378l232 133-232 135z"></path></svg>
4747
</Link>
4848
</li>
4949

@@ -55,7 +55,7 @@ export default function Layout({ children }: PropsChildren) {
5555

5656
<li>
5757
<Link href="mailto:diegocaetano444@outlook.com" target="__blank">
58-
<svg viewBox="0 0 24 24" aria-hidden="true" className="h-6 w-6 fill-zinc-500 transition hover:fill-zinc-600 dark:fill-zinc-400 dark:hover:fill-zinc-300"><path fill-rule="evenodd" d="M6 5a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h12a3 3 0 0 0 3-3V8a3 3 0 0 0-3-3H6Zm.245 2.187a.75.75 0 0 0-.99 1.126l6.25 5.5a.75.75 0 0 0 .99 0l6.25-5.5a.75.75 0 0 0-.99-1.126L12 12.251 6.245 7.187Z"></path></svg>
58+
<svg viewBox="0 0 24 24" aria-hidden="true" className="h-6 w-6 fill-zinc-500 transition hover:fill-zinc-600 dark:fill-zinc-400 dark:hover:fill-zinc-300"><path fillRule="evenodd" d="M6 5a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h12a3 3 0 0 0 3-3V8a3 3 0 0 0-3-3H6Zm.245 2.187a.75.75 0 0 0-.99 1.126l6.25 5.5a.75.75 0 0 0 .99 0l6.25-5.5a.75.75 0 0 0-.99-1.126L12 12.251 6.245 7.187Z"></path></svg>
5959
</Link>
6060
</li>
6161
</ul>

‎src/components/navbar.tsx‎

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,18 @@ import Link from "next/link";
22
import { useRouter } from "next/router";
33
import { CirclesFour, CirclesThreePlus, X } from "phosphor-react";
44
import { Dispatch, SetStateAction, useState } from "react";
5+
import cx from "clsx";
56
import ToggleThemeBtn from "./toggle-dark-theme-btn";
67

78
type useEffectProps = {
89
isOpenedModal: boolean
910
setIsOpenedModal: Dispatch<SetStateAction<boolean>>
1011
}
1112

12-
export default function NavBar({ isOpenedModal, setIsOpenedModal }: useEffectProps) {
13+
export default function NavBar({
14+
isOpenedModal,
15+
setIsOpenedModal
16+
}: useEffectProps) {
1317
const router = useRouter();
1418
const [effect, setEffect] = useState(false);
1519

@@ -19,33 +23,33 @@ export default function NavBar({ isOpenedModal, setIsOpenedModal }: useEffectPro
1923

2024
return (
2125
<nav className="flex justify-center items-center">
22-
<ul className="hidden sm:flex justify-stretch items-cente gap-x-3">
23-
<li className={`${router.pathname == "/" && "light:text-zinc-900/90 dark:fill-zinc-400/90 font-medium" } font-normal sm:min-w-max sm:w-16 sm:flex sm:justify-center hover:text-violet-900/80 hover:transition hover:duration-75 hover:ease-in-out md:text-lg md:w-20 select-none`}>
26+
<ul className="hidden sm:flex sm:justify-stretch sm:items-cente sm:gap-x-3">
27+
<li className={cx(router.pathname == "/" && "text-zinc-900/90 dark:fill-zinc-400/90 font-semibold", "font-medium sm:min-w-max sm:w-16 sm:flex sm:justify-center hover:text-violet-900/80 hover:transition hover:duration-75 hover:ease-in-out md:text-base md:w-20 select-none")}>
2428
<Link href="/">Home</Link>
2529
</li>
26-
<li className={`${router.pathname == "/about" && "light:text-zinc-900/90 dark:fill-zinc-400/90 font-medium"} font-normal sm:min-w-max sm:w-16 sm:flex sm:justify-center hover:text-violet-900/80 hover:transition hover:duration-75 hover:ease-in-out md:text-lg md:w-20 select-none`}>
30+
<li className={cx(router.pathname == "/about" && "text-zinc-900/90 dark:fill-zinc-400/90 font-semibold", "font-medium sm:min-w-max sm:w-16 sm:flex sm:justify-center hover:text-violet-900/80 hover:transition hover:duration-75 hover:ease-in-out md:text-base md:w-20 select-none")}>
2731
<Link href="/about">About</Link>
2832
</li>
29-
<li className={`${router.pathname == "/projects" && "light:text-zinc-900/90 dark:fill-zinc-400/90 font-medium"} font-normal sm:min-w-max sm:w-16 sm:flex sm:justify-center hover:text-violet-900/80 hover:transition hover:duration-75 hover:ease-in-out md:text-lg md:w-20 select-none`}>
33+
<li className={cx(router.pathname == "/projects" && "text-zinc-900/90 dark:fill-zinc-400/90 font-semibold", "font-medium sm:min-w-max sm:w-16 sm:flex sm:justify-center hover:text-violet-900/80 hover:transition hover:duration-75 hover:ease-in-out md:text-base md:w-20 select-none")}>
3034
<Link href="/projects">Projects</Link>
3135
</li>
32-
<li className={`${router.pathname == "/contact" && "light:text-zinc-900/90 dark:fill-zinc-400/90 font-medium"} font-normal sm:min-w-max sm:w-16 sm:flex sm:justify-center hover:text-violet-900/80 hover:transition hover:duration-75 hover:ease-in-out md:text-lg md:w-20 select-none`}>
36+
<li className={cx(router.pathname == "/contact" && "text-zinc-900/90 dark:fill-zinc-400/90 font-semibold", "font-medium sm:min-w-max sm:w-16 sm:flex sm:justify-center hover:text-violet-900/80 hover:transition hover:duration-75 hover:ease-in-out md:text-base md:w-20 select-none")}>
3337
<Link href="/contact">Contact</Link>
3438
</li>
3539
</ul>
3640

3741
<hr className="hidden sm:block w-0.5 h-5 bg-separator/80 dark:bg-white/25 mx-5 md:mx-7 shadow-md rounded-full" />
3842

3943
<button
40-
className={`relative z-50 text-2xl hover:text-violet-900/80 dark:hover:text-violet-300/70 ${effect && "animate-effect"} mr-3`}
44+
className={cx("relative z-50 text-2xl hover:text-violet-900/80 dark:hover:text-violet-300/70", effect && "animate-effect", "mr-3")}
4145
onClick={() => {
4246
setEffect(true);
4347
changeCurrentStateModal();
4448
}}
4549
onAnimationEnd={() => setEffect(false)}
4650
>
4751
{
48-
effect ? <CirclesFour size={25} /> : (isOpenedModal ? <X size={25} /> : <CirclesThreePlus size={25} />)
52+
effect ? <CirclesFour size={25} /> : (isOpenedModal ? <X size={25} /> : <CirclesThreePlus size={25} />)
4953
}
5054
</button>
5155

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

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

56
export default function ToggleThemeBtn() {
67
const [mounted, setMounted] = useState(false);
78
const {theme, setTheme} = useTheme();
89
const [effect, setEffect] = useState(false);
910

10-
useLayoutEffect(() => {
11+
useEffect(() => {
1112
setMounted(true);
1213
setEffect(true);
1314
}, [])
@@ -18,7 +19,7 @@ export default function ToggleThemeBtn() {
1819
<>{
1920
mounted ?
2021
<button
21-
className={`text-2xl hover:text-violet-900/80 dark:hover:text-violet-300/70 ${effect && 'animate-effect-2'}`}
22+
className={cx("text-2xl hover:text-violet-900/80 dark:hover:text-violet-300/70", effect && "animate-effect-2")}
2223
onClick={() => {
2324
setTheme(isDark() ? "light" : "dark")
2425
}}

‎src/pages/_app.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
import '../../styles/globals.css'
22
import type { AppProps } from 'next/app'
33

4-
import { ThemeProvider } from 'next-themes'
4+
import { ThemeProvider } from 'next-themes';
55

66
export default function App({ Component, pageProps }: AppProps) {
77
return (
88
<ThemeProvider attribute="class">
9-
<Component {...pageProps} />
9+
<Component {...pageProps} />
1010
</ThemeProvider>
1111
)
1212
}

‎src/pages/_document.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
1-
import Document, { Html, Main, NextScript } from 'next/document'
1+
import Document, { Html, Main, NextScript, Head } from 'next/document'
22

33
export default class MyDocument extends Document {
44
return () {
55
<Html lang="pt-BR">
6+
<Head />
7+
68
<body>
79
<Main />
810
<NextScript />

0 commit comments

Comments
 (0)