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

Merge pull request 'feat: criar componente de paginas q serao renderizadas na rotas' (#11) from feature/contentArticle into development

Browse Source 
Reviewed-on: #11
This commit is contained in:
Emmanuel Vitor Pereira de Jesus 2023-01-16 15:17:58 +00:00
commit 70428932e3
12 changed files with 355 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/Layout/styles.module.scss
View File

@ -15,5 +15,17 @@
flex-direction: column;
h1 {
text-align: center;
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 28px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #292929;
}
}

1
src/index.css
View File

@ -1,4 +1,5 @@
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',

19
src/pages/Intitucional/Article.tsx Normal file
View File

@ -0,0 +1,19 @@
import React, { ReactNode } from 'react';
interface ArticleProps {
title: string;
children: ReactNode;
}
export const Article = ({ children, title }: ArticleProps) => {
return (
<>
<h2>{title}</h2>
{children}
</>
)
}

67
src/pages/Intitucional/Contact.module.scss Normal file
View File

@ -0,0 +1,67 @@
// @import "../components/Variables.scss";
.formulario {
display: flex;
flex-direction: column;
padding: 16px;
font-family: "Roboto";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 16px;
@media (min-width: 1025px) {
width: 100%;
padding: 12px 30px;
}
input {
padding: 15px 20px;
margin: 12px 0;
border: 1px solid #000;
border-radius: 25px;
font-family: "Roboto";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 16px;
color: #000;
&::placeholder {
color: gray;
}
}
button {
padding: 17px;
background: #000;
border-radius: 25px;
color: #fff;
}
div {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 12px;
label {
order: 2;
}
input {
order: 3;
width: 18px;
height: 18px;
border: 1px solid #000;
border-radius: 3px;
margin: 0 4px;
}
}
@media (max-width: 1024px) {
h2 {
text-align: center;
}
}
}

112
src/pages/Intitucional/Contato.tsx Normal file
View File

@ -0,0 +1,112 @@
import React from 'react';
import { Article } from './Article';
import { Formik, Form, Field, ErrorMessage } from "formik";
import contactFormSchema from "../../schema/ContactFormSchema";
import "./Contact.module.scss";
interface IFormikValues {
name: string;
email: string;
cpf: string;
dateBirth: string;
phone: string;
instagram?: string;
checkbox: boolean;
}
const initialValues = {
name: "",
email: "",
cpf: "",
dateBirth: "",
phone: "",
instagram: "",
checkbox: false,
};
const formSubmit = (values: IFormikValues) => {
console.log(values);
};
export const Contato = () => {
return (
<Article title='Contato'>
<Formik
onSubmit={formSubmit}
initialValues={initialValues}
validationSchema={contactFormSchema}
>
{({ errors, touched }) => (
<Form className="formulario">
<label htmlFor="name">Nome</label>
<Field
id="name"
name="name"
placeholder="Seu nome completo"
className={errors.name && touched.name && "invalid"}
/>
<ErrorMessage name="name" className="form-ivalid-feedback" />
<label htmlFor="email">E-mail</label>
<Field
id="email"
name="email"
placeholder="Seu e-mail"
className={errors.email && touched.email && "invalid"}
/>
<ErrorMessage name="email" className="form-ivalid-feedback" />
<label htmlFor="cpf">CPF</label>
<Field
id="cpf"
name="cpf"
placeholder="000.000.000-00"
className={errors.cpf && touched.cpf && "invalid"}
/>
<ErrorMessage name="cpf" className="form-ivalid-feedback" />
<label htmlFor="data">Data de Nascimento:</label>
<Field
id="dateBirth"
name="dateBirth"
placeholder="00.00.0000"
className={errors.dateBirth && touched.dateBirth && "invalid"}
/>
<ErrorMessage name="dateBirth" className="form-ivalid-feedback" />
<label htmlFor="phone">Telefone:</label>
<Field
id="phone"
name="phone"
type="tel"
placeholder="(00) 00000-0000"
className={errors.phone && touched.phone && "invalid"}
/>
<ErrorMessage name="phone" className="form-ivalid-feedback" />
<label htmlFor="instagram">Instagram</label>
<Field id="instagram" name="instagram" placeholder="@seuuser" />
<ErrorMessage name="instagram" className="form-ivalid-feedback" />
<div>
<label htmlFor="checkbox">Declaro que li e aceito</label>
<Field
type="checkbox"
id="checkbox"
name="checkbox"
className={errors.checkbox && touched.checkbox && "invalid"}
/>
<ErrorMessage name="checkbox" className="form-ivalid-feedback" />
</div>
<button type="submit">CADASTRE-SE</button>
</Form>
)}
</Formik>
</Article>
)
}

21
src/pages/Intitucional/Entrega.tsx Normal file
View File

@ -0,0 +1,21 @@
import React from 'react';
import { Article } from './Article';
export const Entrega = () => {
return (
<Article title='Entrega'>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
</p>
<p>
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur ? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur ?
</p>
</Article>
)
}

21
src/pages/Intitucional/FormaDePagamento.tsx Normal file
View File

@ -0,0 +1,21 @@
import React from 'react';
import { Article } from './Article';
export const FormaDePagamento = () => {
return (
<Article title='Forma de Pagamento'>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
</p>
<p>
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur ? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur ?
</p>
</Article>
)
}

27
src/pages/Intitucional/Institucional.module.scss
View File

@ -1,6 +1,19 @@
.batata {
display: flex;
gap: 30px;
height: 285px;
margin: 80px 0 70px;
h2 {
margin: 0;
font-family: 'Roboto';
font-style: normal;
font-weight: 700;
font-size: 24px;
line-height: 28px;
}
.sideBar {
display: flex;
@ -8,7 +21,9 @@
border-right: 1px solid #000;
width: 100%;
min-width: 302px;
height: 100%;
padding: 0;
margin: 0;
@media (min-width:2500px) {}
@ -42,5 +57,17 @@
.content-right {
background-color: aquamarine;
width: 100%;
h2 {}
p {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
font-size: 13px;
line-height: 15px;
color: #7D7D7D;
}
}
}

21
src/pages/Intitucional/SegurancaEPrivacidade.tsx Normal file
View File

@ -0,0 +1,21 @@
import React from 'react';
import { Article } from './Article';
export const SegurancaEPrivacidade = () => {
return (
<Article title='Seguranca e Privacidade'>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
</p>
<p>
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur ? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur ?
</p>
</Article>
)
}

21
src/pages/Intitucional/Sobre.tsx Normal file
View File

@ -0,0 +1,21 @@
import React from 'react';
import { Article } from './Article';
export const Sobre = () => {
return (
<Article title='Sobre'>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
</p>
<p>
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur ? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur ?
</p>
</Article>
)
}

21
src/pages/Intitucional/TrocaEDevolucao.tsx Normal file
View File

@ -0,0 +1,21 @@
import React from 'react';
import { Article } from './Article';
export const TrocaEDevolucao = () => {
return (
<Article title='Troca e Devolucao'>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
</p>
<p>
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur ? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur ?
</p>
</Article>
)
}

18
src/routes.tsx
View File

@ -1,6 +1,12 @@
import { Routes as ReactRouterRoutes, Route } from "react-router-dom"
import { Layout } from "./components/Layout"
import { Contato } from "./pages/Intitucional/Contato"
import { Entrega } from "./pages/Intitucional/Entrega"
import { FormaDePagamento } from "./pages/Intitucional/FormaDePagamento"
import { Instituicional } from "./pages/Intitucional/Instituicional"
import { SegurancaEPrivacidade } from "./pages/Intitucional/SegurancaEPrivacidade"
import { Sobre } from "./pages/Intitucional/Sobre"
import { TrocaEDevolucao } from "./pages/Intitucional/TrocaEDevolucao"
@ -10,12 +16,12 @@ export const Routes = () => {
<ReactRouterRoutes>
<Route path="/" element={<Layout />}>
<Route path="institucional" element={<Instituicional />}>
<Route path="sobre" element={<div>Red</div>} />
<Route path="forma-de-pagamento" element={<div>batata2</div>} />
<Route path="entrega" element={<div>batata3</div>} />
<Route path="troca-e-devolucao" element={<div>batata4</div>} />
<Route path="seguranca-e-privacidade" element={<div>batata5</div>} />
<Route path="contato" element={<div>batata6</div>} />
<Route path="sobre" element={<Sobre />} index />
<Route path="forma-de-pagamento" element={<FormaDePagamento />} />
<Route path="entrega" element={<Entrega />} />
<Route path="troca-e-devolucao" element={<TrocaEDevolucao />} />
<Route path="seguranca-e-privacidade" element={<SegurancaEPrivacidade />} />
<Route path="contato" element={<Contato />} />
</Route>
</Route>
</ReactRouterRoutes>