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

fea: newsletter mobile

Browse Source
This commit is contained in:
Gabriel Ferraz Nogueira 2023-01-14 19:09:28 -03:00
parent bf62ae323c
commit 465bb382c5
23 changed files with 502 additions and 297 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

450
desafio-react-e-typescript/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

1
desafio-react-e-typescript/package.json
View File

@ -46,7 +46,6 @@
"@types/react-router-dom": "^5.3.3",
"@types/styled-components": "^5.1.26",
"formik": "^2.2.9",
"node-sass": "^7.0.3",
"typescript": "^4.9.4",
"yup": "^0.32.11"
}

13
desafio-react-e-typescript/src/App.scss
View File

@ -20,11 +20,18 @@ body {
padding-bottom: 66px;
border-bottom: 1px solid $color-black;
.Main_textArea {
width: 100%;
@media (min-width: 1025px) {
padding: 0 100px;
}
.Main_textArea {
@media (min-width: 1025px) {
padding: 20px 100px 20px 0px;
width: 100%;
padding: 20px 0px;
}
@media (max-width: 1024px) {
padding: 0 16px;
}
h2 {

27
desafio-react-e-typescript/src/App.tsx
View File

@ -1,35 +1,14 @@
import React, { useState, useEffect } from "react";
import { Router } from "./router";
import { Navegation } from "./components/Navegation";
import "./App.scss";
import { ScreenSize } from "./components/DetectSize";
import { HeaderDesktop } from "./components/Header/HeaderDesktop";
import { HeaderMobile } from "./components/Header/HeaderMobile";
import { TopContainer } from "./components/Container-menu/TopContainer";
import { MainFooter } from "./components/Footer/FooterMain";
export function ScreenSize() {
const [windowDimenion, detectHW] = useState({
winWidth: window.innerWidth,
});
const detectSize = () => {
detectHW({
winWidth: window.innerWidth,
});
};
useEffect(() => {
window.addEventListener("resize", detectSize);
return () => {
window.removeEventListener("resize", detectSize);
};
}, [windowDimenion]);
return window.innerWidth > 1024 ? <HeaderDesktop /> : <HeaderMobile />;
}
import "./App.scss";
export const App = () => {
return (

6
desafio-react-e-typescript/src/components/ContactForm.tsx
View File

@ -1,5 +1,5 @@
import { Formik, Form, Field, ErrorMessage } from "formik";
import FormSchema from "../schema/FormSchema";
import FormSchema from "./schema/FormSchema";
interface IFormikValues {
name: string;
@ -63,6 +63,7 @@ export const ContactForm = () => {
<Field
id="cpf"
name="cpf"
type="number"
placeholder="000.000.000-00"
className={errors.cpf && touched.cpf && "invalid"}
/>
@ -74,6 +75,7 @@ export const ContactForm = () => {
<Field
id="data"
name="data"
type="number"
placeholder="00.00.0000"
className={errors.data && touched.data && "invalid"}
/>
@ -96,7 +98,7 @@ export const ContactForm = () => {
</span>
<Field id="instagram" name="instagram" placeholder="@seuuser" />
<div>
<div className="checkbox_wrapper">
<label htmlFor="checkbox">Declaro que li e aceito</label>
<span className="error">
<ErrorMessage name="checkbox" className="form-ivalid-feedback" />

8
desafio-react-e-typescript/src/components/Container-menu/TopContainer.modules.scss
View File

@ -2,9 +2,13 @@
.TopIcons {
display: flex;
padding: 30px 100px;
padding: 29px 16px;
align-items: center;
@media (min-width: 1025px) {
padding: 30px 100px;
}
.Arrow {
margin: 0 9.7px;
}
@ -36,7 +40,7 @@
color: $color-gray-800;
@media (max-width: 1024px) {
margin-bottom: 50px;
margin: 81px 0 50px;
}
}
}

26
desafio-react-e-typescript/src/components/DetectSize.tsx Normal file
View File

@ -0,0 +1,26 @@
import React, { useState, useEffect } from "react";
import { HeaderDesktop } from "./Header/HeaderDesktop";
import { HeaderMobile } from "./Header/HeaderMobile";
export function ScreenSize() {
const [windowDimenion, detectHW] = useState({
winWidth: window.innerWidth,
});
const detectSize = () => {
detectHW({
winWidth: window.innerWidth,
});
};
useEffect(() => {
window.addEventListener("resize", detectSize);
return () => {
window.removeEventListener("resize", detectSize);
};
}, [windowDimenion]);
return window.innerWidth > 1024 ? <HeaderDesktop /> : <HeaderMobile />;
}

30
desafio-react-e-typescript/src/components/Footer/ContactFooter.tsx Normal file
View File

@ -0,0 +1,30 @@
import { MenuList1, MenuList2, MenuList3 } from "./MenuListFooter";
export const Contact = () => {
return (
<>
<div className="Contact_wrapper">
<div className="Menu_folder">
{window.innerWidth > 1024 ? (
<>
<h5>INSTITUCIONAL</h5>
<MenuList1 />
</>
) : (
""
)}
<h5> INSTITUCIONAL </h5>
<MenuList1 />
</div>
<div className="Menu_folder">
<h5> DÚVIDAS </h5>
<MenuList2 />
</div>
<div className="Menu_folder">
<h5> FALE CONOSCO </h5>
<MenuList3 />
</div>
</div>
</>
);
};

55
desafio-react-e-typescript/src/components/Footer/ContactFooterDesktop.tsx
View File

@ -1,55 +0,0 @@
import { NavLink } from "react-router-dom";
export const ContactDesktop = () => {
return (
<>
<div className="Contact_wrapper">
<div className="Menu_folder">
<h5> INSTITUCIONAL </h5>
<NavLink className={"links_footer"} to={"/"}>
Quem Somos
</NavLink>
<NavLink className={"links_footer"} to={"/"}>
Política de Privacidade
</NavLink>
<NavLink className={"links_footer"} to={"/"}>
Segurança
</NavLink>
<NavLink className={"links_footer last"} to={"/"}>
Seja um Revendedor
</NavLink>
</div>
<div className="Menu_folder">
<h5> DÚVIDAS </h5>
<NavLink className={"links_footer"} to={"/"}>
Entrega
</NavLink>
<NavLink className={"links_footer"} to={"/"}>
Pagamento
</NavLink>
<NavLink className={"links_footer"} to={"/"}>
Trocas e Devoluções
</NavLink>
<NavLink className={"links_footer last"} to={"/"}>
Dúvidas Frequentes
</NavLink>
</div>
<div className="Menu_folder">
<h5> FALE CONOSCO </h5>
<NavLink className={"links_footer"} to={"/"}>
Atendimento ao Consumidor
</NavLink>
<NavLink className={"links_footer"} to={"/"}>
(11) 4159-9504
</NavLink>
<NavLink className={"links_footer"} to={"/"}>
Atendimento Online
</NavLink>
<NavLink className={"links_footer last"} to={"/"}>
(11) 99433-8825
</NavLink>
</div>
</div>
</>
);
};

33
desafio-react-e-typescript/src/components/Footer/FooterMain.modules.scss
View File

@ -8,13 +8,16 @@
display: flex;
flex-direction: column;
border-bottom: 1px solid $color-black;
padding: 16px 31.485%;
padding: 16px;
@media (min-width: 1025px) {
padding: 16px 31.485%;
}
.Newsletter_wrapper {
display: flex;
flex-direction: column;
flex-wrap: wrap;
// align-self: center;
.News_title {
font-family: $fontFamily;
@ -23,7 +26,12 @@
font-size: 18px;
line-height: 21px;
color: $color-gray-700;
margin: 0 0 8px 0;
margin: 0 0 16px 0;
text-transform: uppercase;
@media (min-width: 1025px) {
margin: 0 0 8px 0;
}
}
.Submite_wrapper {
@ -31,6 +39,7 @@
@media (max-width: 1024px) {
flex-direction: column;
gap: 16px;
}
@media (min-width: 1025px) {
@ -38,8 +47,6 @@
}
.Input_News {
width: 24.376%;
min-width: 312px;
padding: 13px 16px;
border: 1px solid $color-white-500;
border-radius: 4px;
@ -52,6 +59,8 @@
@media (min-width: 1025px) {
margin-right: 8px;
width: 24.376%;
min-width: 306px;
}
&::placeholder {
@ -59,8 +68,6 @@
}
}
.Button_News {
width: 9.844%;
min-width: 120px;
padding: 14px 20px;
background: $color-black;
box-shadow: 0px 4px 4px rgba($color-black, 0.25);
@ -72,17 +79,27 @@
font-size: 12px;
line-height: 14px;
color: $color-white;
@media (min-width: 1025px) {
width: 9.844%;
min-width: 126px;
}
}
}
}
}
.Footer_top {
display: flex;
padding: 50px 0;
justify-content: space-around;
@media (max-width: 1024px) {
flex-direction: column;
padding: 24px 16px;
}
@media (min-width: 1025px) {
position: relative;
padding: 50px 0;
}
.Contact_wrapper {

4
desafio-react-e-typescript/src/components/Footer/FooterMain.tsx
View File

@ -1,5 +1,5 @@
import { Newsletter } from "./Newsletter";
import { ContactDesktop } from "./ContactFooterDesktop";
import { Contact } from "./ContactFooter";
import { SocialMedia } from "./SocialMedia";
import { BottomFooter } from "./BottomFooter";
@ -11,7 +11,7 @@ export const MainFooter = () => {
<section className="Footer_container">
<Newsletter />
<div className="Footer_top">
<ContactDesktop />
<Contact />
<SocialMedia />
</div>
<BottomFooter />

26
desafio-react-e-typescript/src/components/Footer/MenuFolder.tsx Normal file
View File

@ -0,0 +1,26 @@
import { MenuList1, MenuList2, MenuList3 } from "./MenuListFooter";
// export const MenuFolder = () => {
// return (
// <>
// <div className="Menu_folder">
// <h5> INSTITUCIONAL </h5>
// <div>
// <MenuList1 />
// </div>
// </div>
// <div className="Menu_folder">
// <h5> DÚVIDAS </h5>
// <div>
// <MenuList2 />
// </div>
// </div>
// <div className="Menu_folder">
// <h5> FALE CONOSCO </h5>
// <div>
// <MenuList3 />
// </div>
// </div>
// </>
// );
// };

58
desafio-react-e-typescript/src/components/Footer/MenuListFooter.tsx Normal file
View File

@ -0,0 +1,58 @@
import { NavLink } from "react-router-dom";
export const MenuList1 = () => {
return (
<>
<NavLink className={"links_footer"} to={"/"}>
Quem Somos
</NavLink>
<NavLink className={"links_footer"} to={"/"}>
Política de Privacidade
</NavLink>
<NavLink className={"links_footer"} to={"/"}>
Segurança
</NavLink>
<NavLink className={"links_footer last"} to={"/"}>
Seja um Revendedor
</NavLink>
</>
);
};
export const MenuList2 = () => {
return (
<>
<NavLink className={"links_footer"} to={"/"}>
Entrega
</NavLink>
<NavLink className={"links_footer"} to={"/"}>
Pagamento
</NavLink>
<NavLink className={"links_footer"} to={"/"}>
Trocas e Devoluções
</NavLink>
<NavLink className={"links_footer last"} to={"/"}>
Dúvidas Frequentes
</NavLink>
</>
);
};
export const MenuList3 = () => {
return (
<>
<NavLink className={"links_footer"} to={"/"}>
Atendimento ao Consumidor
</NavLink>
<NavLink className={"links_footer"} to={"/"}>
(11) 4159-9504
</NavLink>
<NavLink className={"links_footer"} to={"/"}>
Atendimento Online
</NavLink>
<NavLink className={"links_footer last"} to={"/"}>
(11) 99433-8825
</NavLink>
</>
);
};

4
desafio-react-e-typescript/src/components/Footer/SocialMedia.tsx
View File

@ -18,9 +18,7 @@ export const SocialMedia = () => {
<img src={Linkedin} alt="Linkedin-logo" />
</div>
<span className="Site"> www.loremipsum.com </span>
<div>
<WppIcon />
</div>
<div>{window.innerWidth > 1024 ? <WppIcon /> : ""}</div>
</div>
</>
);

7
desafio-react-e-typescript/src/components/Header/HeaderDesktop.modules.scss
View File

@ -31,7 +31,11 @@
padding: 8px;
border: 2px solid $color-white-100;
border-radius: 5px;
color: $color-gray;
color: $color-black;
&::placeholder {
color: $color-gray;
}
@media (min-width: 2500px) {
height: 33px;
@ -44,6 +48,7 @@
content: "";
width: 18px;
height: 18px;
top: 10px;
right: 16px;
background-image: url("../assets/imgs/SVGs/search-icon-desktop.svg");
cursor: pointer;

2
desafio-react-e-typescript/src/components/Header/HeaderMobile.modules.scss
View File

@ -98,6 +98,7 @@
border: 2px solid $color-white-100;
border-radius: 5px;
padding: 10px 16px;
color: $color-black;
&::placeholder {
color: $color-gray;
@ -110,6 +111,7 @@
width: 18px;
height: 18px;
right: 16px;
top: 10px;
background-image: url("../assets/imgs/SVGs/search-icon-desktop.svg");
cursor: pointer;
}

4
desafio-react-e-typescript/src/components/Header/HeaderMobile.tsx
View File

@ -4,7 +4,7 @@ import { NavLink } from "react-router-dom";
import LogoM3 from "../assets/imgs/SVGs/Logo-M3Academy_mobile.svg";
import CartIcon from "../assets/imgs/SVGs/minicart_mobile.svg";
import MenuHamburguer from "../assets/imgs/SVGs/MenuHamburguer.svg";
import { Modal } from "../Modal";
import { MenuHeader } from "../MenuHeader";
import "./HeaderMobile.modules.scss";
@ -14,7 +14,7 @@ export const HeaderMobile = () => {
<>
<section className="HeaderMobile">
<div className="topHeaderMobile">
<Modal isOpened={isOpened} setIsOpened={setIsOpened} />
<MenuHeader isOpened={isOpened} setIsOpened={setIsOpened} />
<button className="MenuIcon" onClick={() => setIsOpened(true)}>
<img src={MenuHamburguer} alt="" />
</button>

4
desafio-react-e-typescript/src/components/Modal.tsx → desafio-react-e-typescript/src/components/MenuHeader.tsx
View File

@ -2,12 +2,12 @@ import { ContentMenuHeader } from "./Header/ContentMenuHeader";
import CloseIcon from "./assets/imgs/SVGs/Close-button.svg";
interface ModalProps {
interface MenuHeaderProps {
isOpened: boolean;
setIsOpened: React.Dispatch<React.SetStateAction<boolean>>;
}
export const Modal = ({ isOpened, setIsOpened }: ModalProps) => {
export const MenuHeader = ({ isOpened, setIsOpened }: MenuHeaderProps) => {
return (
<>
<section className={`ModalWrapper ${isOpened && "opened"}`}>

11
desafio-react-e-typescript/src/components/Navegation.modules.scss
View File

@ -4,13 +4,12 @@
padding: 0 16px;
@media (min-width: 1025px) {
min-width: 25%;
margin-left: 100px;
width: 40.376%;
padding: 0;
margin-right: 30px;
}
ul {
width: 94.379%;
list-style: none;
padding: 0;
margin: 0 !important;
@ -18,7 +17,7 @@
.Title_links {
a {
display: flex;
padding: 26px 16px;
padding: 10px 16px;
margin: 0 !important;
list-style: none;
@ -47,5 +46,9 @@
color: $color-gray-500;
text-decoration: none;
}
.last {
content: "";
}
}
}

12
desafio-react-e-typescript/src/components/Navegation.tsx
View File

@ -16,22 +16,22 @@ export const Navegation = () => {
<>
<nav className="MenuRoutes">
<ul className="links_wrapper">
<li className={`Title_links ${toggleClassCheck} `} onClick={() => {}}>
<li className={`Title_links ${toggleClassCheck} `}>
<NavLink to={"/"}> Sobre </NavLink>
</li>
<li className={`Title_links ${toggleClassCheck} `} onClick={() => {}}>
<li className={`Title_links ${toggleClassCheck} `}>
<NavLink to={"/Pagamentos"}> Formas de Pagamento </NavLink>
</li>
<li className={`Title_links ${toggleClassCheck} `} onClick={() => {}}>
<li className={`Title_links ${toggleClassCheck} `}>
<NavLink to={"/Entrega"}> Entrega </NavLink>
</li>
<li className={`Title_links ${toggleClassCheck} `} onClick={() => {}}>
<li className={`Title_links ${toggleClassCheck} `}>
<NavLink to={"/Devolução"}> Troca e Devolução </NavLink>
</li>
<li className={`Title_links ${toggleClassCheck} `} onClick={() => {}}>
<li className={`Title_links ${toggleClassCheck} `}>
<NavLink to={"/Segurança"}> Segurança e Privacidade </NavLink>
</li>
<li className={`Title_links ${toggleClassCheck} `} onClick={() => {}}>
<li className={`Title_links ${toggleClassCheck} `}>
<NavLink to={"/Contatos"}> Contatos </NavLink>
</li>
</ul>

0
desafio-react-e-typescript/src/schema/CustonValidationsRegex.ts → desafio-react-e-typescript/src/components/schema/CustonValidationsRegex.ts
View File

0
desafio-react-e-typescript/src/schema/FormSchema.ts → desafio-react-e-typescript/src/components/schema/FormSchema.ts
View File

18
desafio-react-e-typescript/src/pages/Contact.modules.scss
View File

@ -12,12 +12,15 @@ form {
@media (min-width: 1025px) {
width: 100%;
padding: 12px 0px;
padding: 0px;
}
label {
margin: 12px 0;
}
input {
padding: 15px 20px;
margin: 12px 0;
border: 1px solid $color-black-800;
border-radius: 25px;
font-family: $fontFamily;
@ -31,6 +34,16 @@ form {
color: $color-gray-300;
}
}
.error {
display: flex;
justify-content: end;
font-family: $fontFamily;
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 14px;
color: $color-red;
}
button {
padding: 17px;
@ -42,7 +55,6 @@ form {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 12px;
label {
order: 2;