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

feat: Adiciona span de erros

Browse Source
This commit is contained in:
Cainã Milech 2022-12-30 18:16:07 -03:00
parent a8ac4bbc13
commit 3dd76ceaf0
7 changed files with 102 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
react-project/src/assets/styles/main.scss
View File

@ -35,7 +35,7 @@
display: flex;
.content {
width: 69.2%;
/*width: 69.2%;*/
align-self: center;
h2 {

26
react-project/src/assets/styles/modules/Navigation.module.scss
View File

@ -5,18 +5,22 @@
height: 285px;
margin-right: 30px;
a {
color: var(--gray-200);
padding: 10px 16px;
display: block;
text-decoration: none;
font-weight: 400;
font-size: 16px;
line-height: 19px;
li {
width: inherit;
&.ativo {
color: var(--white);
background-color: var(--black);
a {
color: var(--gray-200);
padding: 10px 16px;
display: block;
text-decoration: none;
font-weight: 400;
font-size: 16px;
line-height: 19px;
&.ativo {
color: var(--white);
background-color: var(--black);
}
}
}
}

27
react-project/src/assets/styles/modules/Newsletter.module.scss
View File

@ -17,6 +17,8 @@
}
form {
position: relative;
input {
padding: 13px 16px;
border: 1px solid var(--gray-300);
@ -27,6 +29,7 @@
color: var(--gray-100);
width: 340px;
height: 42px;
margin-right: 8px;
&::placeholder {
font-weight: 400;
@ -35,6 +38,30 @@
color: var(--gray-100);
}
}
button {
width: 126px;
height: 42px;
padding: 14px 20px;
background: var(--black);
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
border-radius: 4px;
border: none;
color: var(--white);
font-weight: 700;
font-size: 12px;
line-height: 14px;
}
span {
position: absolute;
left: 0px;
top: 42px;
font-weight: 400;
font-size: 10px;
line-height: 12px;
color: var(--red-100);
}
}
}
}

2
react-project/src/assets/styles/variables.scss
View File

@ -10,4 +10,6 @@
--gray-100: #c4c4c4;
--gray-200: #7d7d7d;
--gray-300: #e5e5e5;
--red-100: #ff0000;
}

52
react-project/src/components/Main.tsx Normal file
View File

@ -0,0 +1,52 @@
import React from "react";
import { Routes, Route } from "react-router-dom";
import { Navigation } from "./Navigation";
import { Newsletter } from "./Newsletter";
import { Sobre } from "./Sobre";
import { Pagamento } from "./Pagamento";
import { Entrega } from "./Entrega";
import { Troca } from "./Troca";
import { Seguranca } from "./Seguranca";
import { Contato } from "./Contato";
//IMAGES
import iconHome from "../assets/images/svgs/home.svg";
import iconArrow from "../assets/images/svgs/arrow-right.svg";
const Main = () => {
return (
<div className="main">
<div className="main__breadcrumb">
<figure>
<img src={iconHome} />
</figure>
<figure>
<img src={iconArrow} />
</figure>
<span>INSTITUCIONAL</span>
</div>
<h1 className="main__title">INSTITUCIONAL</h1>
<div className="main__wrapperNav">
<Navigation />
<Routes>
<Route path="/" element={<Sobre />} />
<Route path="/pagamento" element={<Pagamento />} />
<Route path="/entrega" element={<Entrega />} />
<Route path="/troca" element={<Troca />} />
<Route path="/seguranca" element={<Seguranca />} />
<Route path="/contato" element={<Contato />} />
</Routes>
</div>
<Newsletter />
</div>
);
};
export { Main };

10
react-project/src/components/Newsletter.tsx
View File

@ -6,7 +6,7 @@ import { Formik, Form, Field, ErrorMessage } from "formik";
import * as Yup from "yup";
const FormSchema = Yup.object().shape({
email: Yup.string().required("Campo obrigatorio").email("email invalido"),
email: Yup.string().required("*Campo obrigatório").email("Email inválido"),
});
interface IEmailType {
@ -37,12 +37,8 @@ const Newsletter = () => {
name="email"
className={errors.email && touched.email && "invalid"}
/>
<ErrorMessage
component="span"
name="email"
className="invalid-feedback"
/>
<button type="submit">Enviar</button>
<ErrorMessage component="span" name="email" />
<button type="submit">ENVIAR</button>
</Form>
)}
</Formik>

44
react-project/src/pages/Institucional.tsx
View File

@ -5,54 +5,14 @@ import "../assets/styles/variables.scss";
import "../assets/styles/main.scss";
import { Header } from "../components/Header";
import { Navigation } from "../components/Navigation";
import { Newsletter } from "../components/Newsletter";
import { Main } from "../components/Main";
import { Footer } from "../components/Footer";
import { Routes, Route } from "react-router-dom";
import { Sobre } from "../components/Sobre";
import { Pagamento } from "../components/Pagamento";
import { Entrega } from "../components/Entrega";
import { Troca } from "../components/Troca";
import { Seguranca } from "../components/Seguranca";
import { Contato } from "../components/Contato";
//IMAGES
import iconHome from "../assets/images/svgs/home.svg";
import iconArrow from "../assets/images/svgs/arrow-right.svg";
const Institucional = () => {
return (
<div>
<Header />
<div className="main">
<div className="main__breadcrumb">
<figure>
<img src={iconHome} />
</figure>
<figure>
<img src={iconArrow} />
</figure>
<span>INSTITUCIONAL</span>
</div>
<h1 className="main__title">INSTITUCIONAL</h1>
<div className="main__wrapperNav">
<Navigation />
<Routes>
<Route path="/" element={<Sobre />} />
<Route path="/pagamento" element={<Pagamento />} />
<Route path="/entrega" element={<Entrega />} />
<Route path="/troca" element={<Troca />} />
<Route path="/seguranca" element={<Seguranca />} />
<Route path="/contato" element={<Contato />} />
</Routes>
</div>
<Newsletter />
</div>
<Main />
<Footer />
</div>
);