Criação do header (Elementos e estilo)

Nós vamos criar um arquivo chamado “register.tsx”, dentro da pasta “pages”. Isso já vai fazer com que todos os botões na “homeNoAuth” que levam para “/register”, funcionem.

Nós vamos criar o nosso arquivo de estilo na pasta “styles” chamado “registerLogin.module.scss”, pois usaremos o mesmo estilo para as duas páginas.

import styles from "../styles/registerLogin.module.scss";
import Head from "next/head";

const Register = function () {
  return (
    <>
			<Head>
        <title>Onebitflix - Registro</title>
        <link rel="shortcut icon" href="/favicon.svg" type="image/x-icon" />
      </Head>
      <main></main>
    </>
  );
};

export default Register;

Agora nós vamos na pasta “common”, vamos criar uma pasta chamada “headerGeneric”, pois nós usaremos esse header na página de login, registro e episódio. Ele terá a logo do projeto e um botão, que vai ser manipulado através de props, para colocarmos texto e link.
```
import styles from "./styles.module.scss";

const HeaderGeneric = function () {
  return <></>;
};

export default HeaderGeneric;
```

Nós iremos criar a nossa estrutura. Iremos envolver o nosso container em uma div, pois iremos colocar um background nesse header, e se tivermos o background no container, o background vai ficar “cortado”.

<>
	<div className={styles.header}>
		<Container className={styles.headerContainer}>
	    <Link href="">
	      <img src="/logoOnebitflix.svg" alt="logoRegister" className={styles.headerLogo}/>
			</Link>
      <Link href="">
	      <Button outline color="light" className={styles.headerBtn}></Button>
      </Link>
		</Container>
	</div>
</>

Agora nós iremos criar props. Nós teremos uma para dizer para onde a logo vai redirecionar, outra para a url do botão e outra para o conteúdo do botão.

interface props {
  logoUrl: string;
	btnUrl: string;
  btnContent: string;
}

const HeaderGeneric = function ({ btnContent, btnUrl, logoUrl }: props) {
  return (
    <>
      <div className={styles.header}>
        <Container className={styles.headerContainer}>
          <Link href={logoUrl}>
            <img src="/logoOnebitflix.svg" alt="logoRegister" className={styles.headerLogo}/>
          </Link>
          <Link href={btnUrl}>
            <Button outline color="light" className={styles.headerBtn}>{btnContent}</Button>
          </Link>
        </Container>
      </div>
    </>
  );
};

export default HeaderGeneric;

Agora nós vamos em “register.tsx” para colocar esse header, e termos o retorno visual. Vamos também já colocar os links nas props
```
<main>
	<HeaderGeneric logoUrl="/" btnUrl="/login" btnContent="Quero fazer login"/>
</main>
```
Agora podemos ir para “/register” ver esse header.

Vamos para o style que criamos para poder fazer as modificações visuais no header.

.header {
  background-color: black;
}
.headerContainer {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 20px 0px;
}
.headerLogo {
  width: 180px;
  cursor: pointer;
}

Agora o header já está bem mais próximo do que realmente queremos, vamos manipular o button, mas apenas o hover, pois o botão normal já está como que queremos.
```
.headerBtn {
  &:hover {
    border-color: $lightRed;
    color: $lightGray;
    background-color: transparent;
  }
}
```

Responsividade do header

Agora podemos partir para responsividade. Nós podemos ver que ele “quebra” em “575px”, ficando tanto a logo quando o botão colados nas paredes da página.
```
@media (max-width: 575px) {
  .headerContainer {
    padding: 20px 26px;
    gap: 20px;
  }
}
```
Agora, nós podemos ver que a próxima quebra, que é a que o botão fica abaixo de fato, ocorre em “402px”, então vamos fazer a modificação para centralizarmos.
```
@media (max-width: 402px) {
  .headerContainer {
    justify-content: center;
  }
}
```

Commit do git

Com o nosso header genérico finalizado, podemos então dar o seu commit.

git add -A

git commit -m "Criação dos elementos do header genérico, do seu estilo visual e também da sua responsividade completa - Header genérico"

Conclusão

O que foi feito/visto nessa aula:

Criação da página de registro
Criação do header
Criação das props do header