Rafael_Sampaio_de_Oliveira/desafio-react-e-typescript-rafael-sampaio
1
0
Fork 0
forked from M3-Academy/desafio-react-e-typescript
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: cria formulário 1280px

Browse Source
This commit is contained in:
Rafael Sampaio de Oliveira 2023-01-07 17:48:30 -03:00
parent e453edef48
commit f0b3544eee
14 changed files with 9623 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
package.json
View File

@ -10,6 +10,7 @@
"@types/node": "^16.18.11",
"@types/react": "^18.0.26",
"@types/react-dom": "^18.0.10",
"formik": "^2.2.9",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-modal": "^3.16.1",
@ -17,7 +18,8 @@
"react-scripts": "5.0.1",
"sass": "^1.57.1",
"typescript": "^4.9.4",
"web-vitals": "^2.1.4"
"web-vitals": "^2.1.4",
"yup": "^0.32.11"
},
"scripts": {
"start": "react-scripts start",

2
src/components/Main/About/styles.module.scss
View File

@ -5,7 +5,7 @@
height: 285px;
&__text {
width: 69.388%;
width: 69.26%;
height: 100%;
h1 {

60
src/components/Main/Contact/index.tsx
View File

@ -1,14 +1,70 @@
import React from "react";
import { MainMenu } from "../MainMenu";
import styles from "./styles.module.scss";
import { Formik, Form, Field, ErrorMessage, FormikHelpers } from "formik";
interface FormikValues {
name: string;
email: string;
cpf: number;
birthDate: number;
phone: number;
instagram: string;
}
const initialValues = {
name: "",
email: "",
cpf: 0,
birthDate: 0,
phone: 0,
instagram: "",
};
const Contact = () => {
const handleFormikSubmit = (values: FormikValues) => {
console.log(values);
};
return (
<div className={styles["content"]}>
<MainMenu />
<div className={styles["content__text"]}>
<h1>Contato</h1>
<form></form>
<h1>Preencha o Formulário</h1>
<Formik onSubmit={handleFormikSubmit} initialValues={initialValues}>
<Form className={styles["form"]}>
<div className={styles["form__input"]}>
<label htmlFor="name">Nome</label>
<Field id="name" name="name" placeholder="Seu nome completo" />
</div>
<div className={styles["form__input"]}>
<label htmlFor="email">E-mail</label>
<Field id="email" name="email" placeholder="Seu e-mail" />
</div>
<div className={styles["form__input"]}>
<label htmlFor="cpf">CPF</label>
<Field id="cpf" name="cpf" />
</div>
<div className={styles["form__input"]}>
<label htmlFor="birthDate">Data de Nascimento:</label>
<Field id="birthDate" name="birthDate" />
</div>
<div className={styles["form__input"]}>
<label htmlFor="phone">Telefone:</label>
<Field id="phone" name="phone" />
</div>
<div className={styles["form__input"]}>
<label htmlFor="instagram">Instagram</label>
<Field id="instagram" name="instagram" placeholder="@seuuser" />
</div>
<div className={styles["form__checkbox"]}>
<span>*</span>
<label htmlFor="">Declaro que li e aceito</label>
<input type="checkbox" />
</div>
<button type="submit">CADASTRE-SE</button>
</Form>
</Formik>
</div>
</div>
);

81
src/components/Main/Contact/styles.module.scss
View File

@ -2,10 +2,10 @@
display: flex;
justify-content: space-between;
width: 100%;
height: 285px;
min-height: 285px;
&__text {
width: 69.388%;
width: 69.26%;
height: 100%;
h1 {
@ -25,5 +25,82 @@
line-height: 15px;
color: var(--gray-300);
}
.form {
display: flex;
flex-direction: column;
width: 100%;
height: auto;
&__input {
display: flex;
flex-direction: column;
gap: 12px;
margin-bottom: 12px;
label {
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 16px;
margin-left: 15px;
color: var(--black-499);
}
input {
height: 46px;
background: var(--white-500);
border: 1px solid var(--black-499);
border-radius: 25px;
padding: 15px 0 15px 20px;
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 16px;
color: var(--gray-201);
&::placeholder {
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 16px;
color: var(--gray-201);
}
}
}
&__checkbox {
display: flex;
justify-content: center;
align-items: center;
gap: 4px;
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 16px;
margin-bottom: 12px;
span {
color: var(--red-500);
}
label {
text-decoration: underline;
}
}
button {
height: 52.44px;
background: var(--black-500);
border: none;
border-radius: 25px;
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 19px;
letter-spacing: 0.05em;
color: var(--white-500);
}
}
}
}

2
src/components/Main/Delivery/styles.module.scss
View File

@ -5,7 +5,7 @@
height: 285px;
&__text {
width: 69.388%;
width: 69.26%;
height: 100%;
h1 {

2
src/components/Main/ExchangeAndReturn/styles.module.scss
View File

@ -5,7 +5,7 @@
height: 285px;
&__text {
width: 69.388%;
width: 69.26%;
height: 100%;
h1 {

56
src/components/Main/MainMenu/index.tsx
View File

@ -1,5 +1,5 @@
import React from "react";
import { Link } from "react-router-dom";
import { NavLink } from "react-router-dom";
import styles from "./styles.module.scss";
const MainMenu = () => {
@ -7,22 +7,64 @@ const MainMenu = () => {
<div className={styles["menu"]}>
<ul>
<li>
<Link to="/">Sobre</Link>
<NavLink
to="/"
className={({ isActive }) =>
isActive ? `${styles["active"]}` : undefined
}
>
Sobre
</NavLink>
</li>
<li>
<Link to="/payment">Forma de Pagamento</Link>
<NavLink
to="/payment"
className={({ isActive }) =>
isActive ? `${styles["active"]}` : undefined
}
>
Forma de Pagamento
</NavLink>
</li>
<li>
<Link to="/delivery">Entrega</Link>
<NavLink
to="/delivery"
className={({ isActive }) =>
isActive ? `${styles["active"]}` : undefined
}
>
Entrega
</NavLink>
</li>
<li>
<Link to="/exchange">Troca e Devolução</Link>
<NavLink
to="/exchange"
className={({ isActive }) =>
isActive ? `${styles["active"]}` : undefined
}
>
Troca e Devolução
</NavLink>
</li>
<li>
<Link to="/security">Segurança e Privacidade</Link>
<NavLink
to="/security"
className={({ isActive }) =>
isActive ? `${styles["active"]}` : undefined
}
>
Segurança e Privacidade
</NavLink>
</li>
<li>
<Link to="/contact">Contato</Link>
<NavLink
to="/contact"
className={({ isActive }) =>
isActive ? `${styles["active"]}` : undefined
}
>
Contato
</NavLink>
</li>
</ul>
</div>

16
src/components/Main/MainMenu/styles.module.scss
View File

@ -2,21 +2,31 @@
border-width: 0 1px 0 0;
border-style: solid;
border-color: var(--black-500);
width: 28.015%;
width: 27.963%;
height: 100%;
li {
padding: 10px 0 10px 16px;
height: 39px;
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 19px;
color: var(--gray-300);
a {
display: block;
line-height: 39px;
padding-left: 16px;
}
&:hover {
cursor: pointer;
background: var(--black-500);
color: var(--white-500);
}
}
.active {
background: var(--black-500);
color: var(--white-500);
}
}

2
src/components/Main/Payment/styles.module.scss
View File

@ -5,7 +5,7 @@
height: 285px;
&__text {
width: 69.388%;
width: 69.26%;
height: 100%;
h1 {

2
src/components/Main/SecurityAndPrivacy/styles.module.scss
View File

@ -5,7 +5,7 @@
height: 285px;
&__text {
width: 69.388%;
width: 69.26%;
height: 100%;
h1 {

4
src/components/Main/index.tsx
View File

@ -12,7 +12,7 @@ import { Contact } from "./Contact";
const Main = () => {
return (
<section className={styles["main"]}>
<main className={styles["main"]}>
<div className={styles["main__container"]}>
<div className={styles["main__top"]}>
<div className={styles["main__way"]}>
@ -39,7 +39,7 @@ const Main = () => {
</Router>
</div>
</div>
</section>
</main>
);
};

5
src/components/Main/styles.module.scss
View File

@ -1,7 +1,8 @@
.main {
display: flex;
justify-content: center;
height: 588px;
height: auto;
margin-bottom: 70px;
&__container {
width: 84.375%;
@ -10,7 +11,7 @@
&__top {
width: 100%;
height: 233px;
height: 100%;
}
&__way {

4
src/styles/global.scss
View File

@ -11,11 +11,15 @@
--black-300: #303030;
--black-400: #292929;
--black-499: #100d0e;
--black-500: #000000;
--gray-100: #c4c4c4;
--gray-200: #c6c6c6;
--gray-201: #b9b7b7;
--gray-300: #7d7d7d;
--red-500: #ff0000;
}
a {

9407
yarn.lock Normal file
View File

File diff suppressed because it is too large Load Diff