Nós iremos criar uma página que terá as informações do usuário, onde ele poderá alterar suas informações e também a sua senha.
Nós iremos fazer um arquivo na pasta “pages” chamado “profile.tsx”. Vamos criar o estilo visual dessa nossa página em “styles”
import Head from "next/head";
import styles from "../styles/profile.module.scss";
const UserFrom = function () {
return (
<>
<Head>
<title>Onebitflix - Meus Dados</title>
<link rel="shortcut icon" href="/favicon.svg" type="image/x-icon" />
</Head>
<main></main>
</>
);
};
export default UserFrom;
Agora, nós iremos em “components” criar uma pasta chamada “profile”. Dentro dessa pasta nós iremos criar duas, uma chamada “user” e outra chamada “password”. (O visual dela será o visual que criamos em ‘styles’, não será um novo”
Vamos começar configurando a user.
import styles from "../../../../styles/profile.module.scss";
const UserFrom = function () {
return <></>;
};
export default UserFrom;
Nós vamos fazer um formulário. Nós iremos primeiro fazer toda a parte visual, depois faremos a conexão e iremos substituir o que criamos com informações fixas.
Nós vamos primeiro fazer a parte do nome e a abreviação do usuário.
<>
<Form>
<div className={styles.formName}>
<p className={styles.nameAbbreviation}>NT</p>
<p className={styles.userName}>NAME TEST</p>
</div>
<div className={styles.memberTime}>
<img src="/profile/iconProfileTime.svg" alt="iconProfile" className={styles.memberTimeImg}/>
<p className={styles.memberTimeText}>Membro desde <br /> 20 de Abril de 2020</p>
</div>
</Form>
</>
Nós vamos agora colocar esse formulário no nosso arquivo “profile.tsx” para termos retorno visual. (localhoast:3001/profile)
<>
<Head>
<title>Onebitflix - Meus Dados</title>
<link rel="shortcut icon" href="/favicon.svg" type="image/x-icon" />
</Head>
<main>
<UserFrom />
</main>
</>
Agora, nós podemos até mesmo acessar esse nosso profile através do “Meus Dados” no modal. Nós vamos agora colocar as outras informações que a pessoa tem no user.
<hr />
<div className={styles.inputFlexDiv}>
<FormGroup>
<Label className={styles.label} for="firstName">
NOME
</Label>
<Input
name="firstName"
type="text"
id="firstName"
placeholder="Qual o seu primeiro nome?"
required
maxLength={20}
className={styles.inputFlex}
value={"Name"}
/>
</FormGroup>
<FormGroup>
<Label className={styles.label} for="lastName">
SOBRENOME
</Label>
<Input
name="lastName"
type="text"
id="lastName"
placeholder="Qual o seu último nome?"
required
maxLength={20}
className={styles.inputFlex}
value={"Test"}
/>
</FormGroup>
</div>
<div className={styles.inputNormalDiv}>
<FormGroup>
<Label className={styles.label} for="phone">
WHATSAPP / TELEGRAM
</Label>
<Input
name="phone"
type="tel"
id="phone"
placeholder="(xx) 9xxxx-xxxx"
required
className={styles.input}
value={"+55 (21) 99999-9999"}
/>
</FormGroup>
<FormGroup>
<Label className={styles.label} for="email">
E-MAIL
</Label>
<Input
name="email"
type="email"
id="email"
placeholder="Coloque o seu email"
required
className={styles.input}
value={"[email protected]"}
/>
</FormGroup>
<Button className={styles.formBtn} outline>
Salvar Alterações
</Button>
</div>
Agora, nós podemos ver no navegador que temos já tudo funcionando corretamente, precisando apenas de alterações visuais. Antes de fazermos todas as alterações que queremos, vamos montar a estrutura básica lá no “profile.tsx”
Nós vamos aqui no “profile.tsx” criar uma linha com duas colunas, uma dela vai contar 2 botões, que serão os botões para selecionar o formulário, e outra com o formulário.
<main>
<HeaderAuth />
<Container calssName="py-5">
<p className={styles.title}>Minha Conta</p>
<Row className="pt-3 pb-5">
<Col md={4} className={styles.btnColumn}>
<Button outline className={styles.renderFormBtn}>
DADOS PESSOAIS
</Button>
<Button outline className={styles.renderFormBtn}>
SENHA
</Button>
</Col>
<Col md>
<UserFrom />
</Col>
</Row>
</Container>
</main>
Nós podemos ver que está funcionando, está estranho por enquanto, mas já vamos começar a modificar para ficar do jeito que queremos, começando pelo formulário
@import "./colors.module.scss";
.form {
border: 1px solid $darkGray;
padding: 20px 0px;
max-width: 100%;
}
.formName {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 80%;
margin: 20px auto;
text-transform: uppercase;
}
.nameAbbreviation {
font-size: 40px;
font-weight: bold;
min-width: 70px;
min-height: 70px;
border-radius: 50%;
background-color: white;
color: black;
display: flex;
align-items: center;
justify-content: center;
}
.userName {
font-size: 30px;
font-weight: bold;
word-break: break-all;
}
.memberTime {
display: flex;
justify-content: center;
gap: 10px;
}
.memberTimeImg {
width: 20px;
}
.memberTimeText {
font-size: 14px;
color: $lightGray;
}
Com isso, a nossa parte 1 do formulário está agora funcionando perfeitamente. Nós colocamos um “width” em “formName” para caso o nome seja muito longo, nós termos uma quebra do nome, para deixarmos o nosso “formName” organizado e alinhado sempre.
Agora, nós iremos para a parte dos inputs do formulário.
.label {
font-size: 14px;
font-weight: bold;
}
.inputFlexDiv {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 50px;
}
.inputFlex {
width: 250px;
background-color: transparent;
border: 1px solid $darkGray;
color: white;
transition: 0.3s;
text-transform: uppercase;
&::placeholder {
color: $lightGray;
}
&:focus {
box-shadow: none;
border-color: $lightRed;
background-color: transparent;
color: white;
}
}
.inputNormalDiv{
display: flex;
flex-direction: column;
align-items: center;
margin-top: 20px;
gap: 20px;
}
.input {
@extend .inputFlex;
text-transform: lowercase;
width: 550px;
}
.formBtn {
border-color: $lightRed;
text-align: center;
color: white;
font-weight: bold;
font-size: 15px;
padding: 6px 20px;
transition: 0.4s;
&:hover {
border-color: $darkRed;
background-color: transparent;
color: $lightGray;
}
&:focus {
box-shadow: none;
outline: none;
}
}
Com isso, podemos ver que o nosso formulário está 100% do jeito que queremos. Podemos então manipular o título e os botões.
.title {
font-size: 45px;
font-weight: bold;
padding: 0px 0px 50px 0px;
}
.renderFormBtn {
display: block;
width: 200px;
border: 1px solid $darkGray;
color: white;
font-weight: bold;
margin: 0 auto;
padding: 14px 0px;
&:hover {
background-color: transparent;
border-color: $lightRed;
color: $lightGray;
}
}
Agora, nós vamos colocar uma div ao redor do header para colocarmos um background nela. Se colocarmos o background diretonela, não vai funcionar, pois nós teremos problema com o container que temos nela.
<div className={styles.header}>
<HeaderAuth />
</div>
Agora, nós iremos fazer a manipulação do background do header. (Podemos colocar abaixo do import de colors para ficar numa ordem organizada)
.header {
background-color: black;
}
Vamos importar o footer e fazer a mesma coisa, só que o footer podemos colocar o background dele no final da página mesmo.
<div className={styles.footer}>
<Footer />
</div>
.footer {
background-color: black;
}
Nós faremos então a responsividade da nossa página. Nós podemos ver que a primeira quebra acontece em “991px”, quando as colunas quebram. Vamos então ajustar os espaçamentos e centrlização.
@media (max-width: 991px) {
.title {
text-align: center;
}
.btnColumn {
width: 100%;
margin-bottom: 40px;
}
}