creating header component

.eslintrc.js

@@ -25,6 +25,7 @@ module.exports = {
     "import/extensions": "off",
     "react/jsx-props-no-spreading": "off",
     "arrow-body-style": "off",
+    "import/prefer-default-export": "off",
     "react/jsx-filename-extension": [
       1,
       { extensions: [".js", ".jsx", ".tsx", ".ts", ".d.ts"] },

src/components/Header/index.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+
+import { NavLink } from "../NavLink";
+
+import { Container, ContentContainer, Navigation } from "./styles";
+
+export function Header() {
+  return (
+    <Container>
+      <ContentContainer>
+        <a href="/" className="logo">
+          <img src="/images/logo.png" alt="Logo Arthur Sena" />
+        </a>
+        <Navigation>
+          <NavLink href="/" label="HOME" />
+          <NavLink href="/projetos" label="PROJETOS" />
+          <NavLink href="/contato" label="CONTATO" />
+          <NavLink href="/sobre" label="SOBRE" />
+        </Navigation>
+      </ContentContainer>
+    </Container>
+  );
+}

src/components/Header/styles.ts

@@ -0,0 +1,90 @@
+import styled from "styled-components";
+
+export const Container = styled.div`
+  width: 100%;
+  height: 5rem;
+
+  display: flex;
+  justify-content: center;
+  align-self: center;
+
+  background-color: rgba(17, 17, 17, 0.8);
+  -webkit-backdrop-filter: blur(24px);
+  backdrop-filter: blur(24px);
+  border-bottom: 1px solid #242424;
+
+  position: fixed;
+`;
+
+export const ContentContainer = styled.header`
+  width: 90%;
+  max-width: 1120px;
+
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+
+  a,
+  button {
+    transition: filter 0.6s;
+
+    &:hover {
+      filter: brightness(0.8);
+    }
+  }
+
+  .logo {
+    width: 20%;
+    max-width: 3rem;
+
+    img {
+      width: 100%;
+      object-fit: contain;
+    }
+  }
+`;
+
+export const Navigation = styled.nav`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+
+  transform: translateX(1.25rem);
+
+  button {
+    height: 2.375rem;
+    display: flex;
+    align-items: center;
+
+    color: #b1b1b1;
+    font-size: 0.95rem;
+    letter-spacing: 2px;
+    text-transform: capitalize;
+
+    padding: 0 1.25rem;
+    border-radius: 6px;
+
+    transition: all 0.3s;
+
+    outline: none;
+    border: 0;
+    background-color: transparent;
+    cursor: pointer;
+
+    &:hover,
+    &.active {
+      filter: brightness(1);
+      color: #f6f6f6;
+      background-color: #2e2e2e;
+    }
+
+    &.active {
+      cursor: default;
+    }
+  }
+
+  button + button {
+    margin-left: 0.5rem;
+  }
+`;

src/components/NavLink/index.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import { useRouter } from "next/router";
+
+interface NavLinkProps {
+  href: string;
+  label: string;
+}
+
+export function NavLink({ href, label }: NavLinkProps) {
+  const router = useRouter();
+  const path = router.asPath;
+
+  return (
+    <button
+      type="button"
+      className={path === href ? "active" : ""}
+      onClick={() => router.push(href)}
+      disabled={path === href}
+    >
+      {label}
+    </button>
+  );
+}

src/pages/_app.tsx

@@ -1,11 +1,14 @@
 import React from "react";
 import { AppProps } from "next/app";
 
+import { Header } from "../components/Header";
+
 import GlobalStyle from "../styles/global";
 
 const MyApp: React.FC<AppProps> = ({ Component, pageProps }) => {
   return (
     <>
+      <Header />
       <Component {...pageProps} />
       <GlobalStyle />
     </>

src/styles/global.ts

@@ -17,6 +17,11 @@ export default createGlobalStyle`
     align-items: center;
     background-color: #111;
   }
+
+  a {
+    color: #b1b1b1;
+    text-decoration: none;
+  }
 `;
 
 export const Page = styled.div`