forked from M3-Academy/desafio-react-e-typescript
newsletter finalizada
This commit is contained in:
parent
4ef36fbfb2
commit
98a797ade7
@ -1,5 +1,135 @@
|
||||
@import "../utils/Variables.scss";
|
||||
.hiden{
|
||||
display: none !important;
|
||||
}
|
||||
.footer{
|
||||
&_wrapper{
|
||||
display: flex;
|
||||
border-top: 1px solid $-black;
|
||||
border-bottom: 1px solid $-black;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 16px;
|
||||
align-self: stretch;
|
||||
width: 100%;
|
||||
&_Form{
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
flex-direction: column;
|
||||
width: 37.830%;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
h2{
|
||||
font-family: 'Roboto',sans-serif;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-size: 18px;
|
||||
line-height: 21px;
|
||||
letter-spacing: 0.05em;
|
||||
font-variant: small-caps;
|
||||
}
|
||||
&__Newsletter{
|
||||
gap: 8px;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
div{
|
||||
width: max-content;
|
||||
min-width: 72.02%;
|
||||
input{
|
||||
border-radius: 4px;
|
||||
border: 1px solid #E5E5E5;
|
||||
width: 100%;
|
||||
height: 42px;
|
||||
&[placeholder]{
|
||||
padding: 16px;
|
||||
color: $-gray-300;
|
||||
font-family: 'Roboto',sans-serif;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 16px;;
|
||||
}
|
||||
}
|
||||
}
|
||||
button{
|
||||
background: $-black;
|
||||
color: $-white;
|
||||
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
|
||||
border-radius: 4px;
|
||||
width: 100%;
|
||||
min-width: 32.66%;
|
||||
height: 42px;
|
||||
|
||||
.main_wrapper{
|
||||
font-family: 'Roboto',sans-serif;
|
||||
font-style: normal;
|
||||
letter-spacing: 0.05em;
|
||||
font-weight: 700;
|
||||
font-size: 12px;
|
||||
line-height: 14px
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 280px) and (max-width: 1024px){
|
||||
.footer{
|
||||
&_wrapper{
|
||||
&_Form{
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
h2{
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
}
|
||||
&__Newsletter{
|
||||
gap: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
div{
|
||||
min-width: 100%;
|
||||
}
|
||||
button{
|
||||
box-shadow: 0px 0px 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 2500px){
|
||||
.footer{
|
||||
&_wrapper{
|
||||
&_Form{
|
||||
width: 37.399%;
|
||||
h2{
|
||||
font-size: 36px;
|
||||
line-height: 42px;
|
||||
}
|
||||
&__Newsletter{
|
||||
gap: 8px;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
div{
|
||||
min-width: 72.374%;
|
||||
input{
|
||||
height: 60px;
|
||||
&[placeholder]{
|
||||
font-size: 28px;
|
||||
line-height: 33px;
|
||||
}
|
||||
}
|
||||
}
|
||||
button{
|
||||
min-width: 26%;
|
||||
height: 59px;
|
||||
font-size: 24px;
|
||||
line-height: 28px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,21 +1,24 @@
|
||||
import React from "react";
|
||||
import { Field, ErrorMessage } from 'formik';
|
||||
|
||||
interface inputProps {
|
||||
type:string
|
||||
name?:string;
|
||||
required?:boolean
|
||||
interface Calsses {
|
||||
className?: string;
|
||||
Errorclass?: string;
|
||||
Labelclass?: string;
|
||||
Inputclass?: string;
|
||||
Simbol?: string;
|
||||
Simbolclass?: string;
|
||||
}
|
||||
|
||||
interface inputProps extends Calsses {
|
||||
type:string
|
||||
name?:string;
|
||||
required?:boolean
|
||||
id?: string;
|
||||
Label?: string;
|
||||
placeholder?: string;
|
||||
}
|
||||
interface checkbox extends inputProps {
|
||||
Simbol?: string;
|
||||
Simbolclass?: string;
|
||||
checked?:boolean
|
||||
onClick?: (checked:React.ChangeEvent<HTMLInputElement>) => void
|
||||
}
|
||||
@ -25,7 +28,7 @@ export const Inputform: React.FC<checkbox> = (
|
||||
) => {
|
||||
return(
|
||||
<div className={className}>
|
||||
<span className={Simbolclass}>{Simbol}</span>
|
||||
<span className={Simbolclass}>{Simbol}</span>
|
||||
<label className={Labelclass} htmlFor={id}>{Label}</label>
|
||||
<Field
|
||||
onClick={onClick}
|
||||
59
desafio-5/src/components/scripts/células/Newsletter.tsx
Normal file
59
desafio-5/src/components/scripts/células/Newsletter.tsx
Normal file
@ -0,0 +1,59 @@
|
||||
import React from "react";
|
||||
import { Formik,Form, FormikHelpers } from 'formik';
|
||||
import { Inputform } from "./Input_Form";
|
||||
import NewsletterSchema from "../../../schema/NewsletterSchema";
|
||||
|
||||
interface Calsses {
|
||||
wraaperclass?: string;
|
||||
FormClass?: string;
|
||||
Errorclass?: string;
|
||||
Labelclass?: string;
|
||||
Inputclass?: string;
|
||||
Buttonclass?: string;
|
||||
Simbol?: string;
|
||||
Simbolclass?: string;
|
||||
}
|
||||
|
||||
interface NewsletterProps extends Calsses {
|
||||
|
||||
}
|
||||
interface Newsletteratrr extends NewsletterProps {
|
||||
|
||||
}
|
||||
interface FormTypes{
|
||||
newsletter: string,
|
||||
}
|
||||
const initialValues = {
|
||||
newsletter: "",
|
||||
}
|
||||
|
||||
export const Newsletter: React.FC<Newsletteratrr> = (
|
||||
{wraaperclass,FormClass,Inputclass,Buttonclass,Errorclass}
|
||||
) => {
|
||||
|
||||
const handleFormikSubmit = (values:FormTypes, formik: FormikHelpers<FormTypes>) =>{
|
||||
console.log(values)
|
||||
formik.resetForm();
|
||||
}
|
||||
|
||||
return(
|
||||
<div className={wraaperclass}>
|
||||
<h2>Assine nossa Newsletter</h2>
|
||||
<Formik
|
||||
validationSchema={NewsletterSchema}
|
||||
onSubmit={handleFormikSubmit}
|
||||
initialValues={initialValues}>
|
||||
<Form className={FormClass}>
|
||||
<Inputform
|
||||
name="newsletter"
|
||||
type="email"
|
||||
placeholder="E-mail"
|
||||
className={Inputclass}
|
||||
Errorclass={Errorclass}
|
||||
/>
|
||||
<button type="submit" className={Buttonclass}>Enviar</button>
|
||||
</Form>
|
||||
</Formik>
|
||||
</div>
|
||||
)
|
||||
};
|
||||
@ -1,12 +1,18 @@
|
||||
import React, { useState, useEffect, useRef, useMemo, useCallback,useContext} from "react"
|
||||
import React from "react"
|
||||
// { useState, useEffect, useRef, useMemo, useCallback,useContext}
|
||||
|
||||
import FooterStyles from "../modules/footer.module.scss"
|
||||
import { Newsletter } from "./células/Newsletter";
|
||||
|
||||
const Footer = () =>{
|
||||
return (
|
||||
<footer>
|
||||
<div className={FooterStyles["main_wrapper"]}>
|
||||
conteudo do footer
|
||||
<div className={FooterStyles["footer_wrapper"]}>
|
||||
<Newsletter
|
||||
wraaperclass={FooterStyles.footer_wrapper_Form}
|
||||
FormClass={FooterStyles.footer_wrapper_Form__Newsletter}
|
||||
Errorclass={FooterStyles.hiden}
|
||||
/>
|
||||
</div>
|
||||
</footer>
|
||||
)
|
||||
|
||||
@ -4,8 +4,6 @@ import { Formik,Form, Field, FormikHelpers } from 'formik';
|
||||
import { Submenu } from "../../Modal/submenuModal";
|
||||
import {SubmenuContext} from "../../contexts/SubmenuContext";
|
||||
import {RouterContext} from "../../contexts/React_Router_context"
|
||||
import { Link, Navigate } from "react-router-dom";
|
||||
import { pathroot } from "../../pages/router/Pathrooter";
|
||||
|
||||
import HeaderStyles from "../modules/header.module.scss"
|
||||
|
||||
@ -26,6 +24,7 @@ const initialValues = {
|
||||
const Header = () =>{
|
||||
|
||||
const { navigate } = useContext(RouterContext);
|
||||
// onClick={() => navigate("/Cursos")}
|
||||
const { isOpened, setisOpened } = useContext(SubmenuContext)
|
||||
const handleSeacrhFormikSubmit = (values:SearchboxTypes, formik: FormikHelpers<SearchboxTypes>) =>{
|
||||
formik.resetForm();
|
||||
@ -47,7 +46,7 @@ const Header = () =>{
|
||||
<Form className={HeaderStyles["Header_wrapper-top-Searchbox"]}>
|
||||
<Field id="search" name="search" type="text" placeholder="Buscar" />
|
||||
<label htmlFor="search">
|
||||
<button>
|
||||
<button type="submit">
|
||||
<img src={Lupa} alt="Lupa" />
|
||||
</button>
|
||||
</label>
|
||||
@ -102,8 +101,8 @@ const Header = () =>{
|
||||
<nav className={HeaderStyles["Header_wrapper-bottom-navigator"]}>
|
||||
<ul>
|
||||
<li><button onClick={() => navigate("/Cursos")}>CURSOS</button></li>
|
||||
<li><button onClick={() => navigate("/Saiba+&+Mais")}>SAIBA MAIS</button></li>
|
||||
<li><button onClick={() => navigate("/Institucional")}>INSTITUCIONAIS</button></li>
|
||||
<li><button>SAIBA MAIS</button></li>
|
||||
<li><button>INSTITUCIONAIS</button></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
import React from "react"
|
||||
|
||||
import Institucional from "../../pages/Institucional";
|
||||
import Routers from '../../pages/router/Pathrooter';
|
||||
|
||||
const Main = () => {
|
||||
return (
|
||||
<main >
|
||||
<Institucional />
|
||||
<Routers />
|
||||
</main>
|
||||
)
|
||||
};
|
||||
|
||||
@ -2,7 +2,7 @@ import React from 'react';
|
||||
import ReactDOM from 'react-dom/client';
|
||||
import { Header } from './components/scripts/header';
|
||||
import { Footer } from './components/scripts/footer';
|
||||
import Routers from './pages/router/Pathrooter';
|
||||
import Main from "./components/scripts/main";
|
||||
import {SubmenuProvider} from "./contexts/SubmenuContext"
|
||||
import {RouterProvider} from "./contexts/React_Router_context"
|
||||
import './components/Main.scss';
|
||||
@ -17,7 +17,7 @@ if (rootElement) {
|
||||
<SubmenuProvider>
|
||||
<Header />
|
||||
</SubmenuProvider>
|
||||
<Routers />
|
||||
<Main />
|
||||
<Footer />
|
||||
</RouterProvider>
|
||||
);
|
||||
|
||||
@ -7,7 +7,7 @@ import Leftarrow from "../components/assets/icons/Leftarrow.svg"
|
||||
import MainStyles from "../components/modules/home.module.scss"
|
||||
import FormShecma from "../schema/FormShecma";
|
||||
import { Title,BreadcrumbTitle,FormTitle } from "../components/scripts/moleculas/Title"
|
||||
import { Inputform } from "../components/scripts/moleculas/InputForm"
|
||||
import { Inputform } from "../components/scripts/células/Input_Form"
|
||||
|
||||
|
||||
const title = "INSTITUCIONAL"
|
||||
|
||||
@ -20,9 +20,9 @@ const Routers = () => {
|
||||
<Router>
|
||||
<Routes>
|
||||
<Route path={pathroot.Home} element={currentRoute === '/' ? <Institucional /> : null} />
|
||||
<Route path={pathroot.Cursos} element={currentRoute === '/cursos' ? <div>estou no Cursos</div> : null} />
|
||||
<Route path={pathroot.SaibaMais} element={currentRoute === '/saiba+&+mais' ? <div>estou no Saiba Mais</div> : null} />
|
||||
<Route path={pathroot.Institucional} element={currentRoute === '/institucional' ? <Institucional /> : null} />
|
||||
<Route path={pathroot.Cursos} element={currentRoute === "/Cursos" ? <div>estou no Cursos</div> : null} />
|
||||
<Route path={pathroot.SaibaMais} element={currentRoute === '/Saiba+&+mais' ? <div>estou no Saiba Mais</div> : null} />
|
||||
<Route path={pathroot.Institucional} element={currentRoute === '/Institucional' ? <Institucional /> : null} />
|
||||
<Route path="*" element={<Navigate to={pathroot.Home}/>}/>
|
||||
</Routes>
|
||||
</Router>
|
||||
|
||||
@ -14,6 +14,12 @@ export default Yup.object().shape({
|
||||
)
|
||||
.required("* Campo Obrigatório")
|
||||
.email("* Email inválido"),
|
||||
// newsletter: Yup.string()
|
||||
// .matches(
|
||||
// /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@(?:gmail|hotmail|outlook)\.com$/,
|
||||
// ""
|
||||
// )
|
||||
// .email("* Email inválido"),
|
||||
|
||||
cpf: Yup.string()
|
||||
.required("* Campo Obrigatório")
|
||||
|
||||
11
desafio-5/src/schema/NewsletterSchema.tsx
Normal file
11
desafio-5/src/schema/NewsletterSchema.tsx
Normal file
@ -0,0 +1,11 @@
|
||||
import * as Yup from "yup";
|
||||
|
||||
|
||||
export default Yup.object().shape({
|
||||
newsletter: Yup.string()
|
||||
.matches(
|
||||
/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@(?:gmail|hotmail|outlook)\.com$/,
|
||||
""
|
||||
)
|
||||
.email("* Email inválido"),
|
||||
});
|
||||
Loading…
Reference in New Issue
Block a user