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

Merge pull request 'feature/footer' (#8) from feature/footer into development

Browse Source 
Reviewed-on: #8
This commit is contained in:
Nicolly Vieira Santos Costa 2023-01-07 17:35:31 +00:00
commit 8397c01f12
16 changed files with 292 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
desafio-react-typescript/src/assets/svgs/arrow-up.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="13" height="7" viewBox="0 0 13 7" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.6 6.13647C12.5989 6.24898 12.5519 6.36118 12.4588 6.44888L12.4587 6.44902C12.2574 6.63896 11.9216 6.63894 11.7204 6.44903L11.7204 6.44902L6.7744 1.78259L6.4999 1.5236L6.2254 1.78259L1.27968 6.44882C1.27966 6.44884 1.27964 6.44886 1.27962 6.44888C1.07811 6.63886 0.742449 6.63877 0.541181 6.44888L0.541122 6.44882C0.448342 6.36133 0.401297 6.24944 0.400026 6.13719C0.401078 6.02468 0.448119 5.91242 0.541189 5.82462L0.541192 5.82461L6.13082 0.550956C6.13085 0.550933 6.13087 0.55091 6.13089 0.550887C6.22923 0.458193 6.36162 0.408533 6.49988 0.408533C6.63821 0.408533 6.77079 0.458327 6.86907 0.55102C6.86908 0.551029 6.86909 0.551037 6.8691 0.551047L12.4587 5.82475L12.4588 5.82482C12.5516 5.9124 12.5987 6.02428 12.6 6.13647Z" fill="white" stroke="white" stroke-width="0.8"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 891 B

3
desafio-react-typescript/src/assets/svgs/plus.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="8" height="9" viewBox="0 0 8 9" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.625 3.32031H7.79688V4.6875H4.625V8.28125H3.17188V4.6875H0V3.32031H3.17188V0H4.625V3.32031Z" fill="#303030"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 220 B

11
desafio-react-typescript/src/assets/svgs/whatsapp.svg Normal file
View File

@ -0,0 +1,11 @@
<svg width="34" height="34" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_3715_5437)">
<path d="M17.0042 0H16.9958C7.62238 0 0 7.6245 0 17C0 20.7188 1.1985 24.1655 3.23638 26.9641L1.11775 33.2796L7.65213 31.1908C10.3403 32.9715 13.5469 34 17.0042 34C26.3776 34 34 26.3734 34 17C34 7.62663 26.3776 0 17.0042 0Z" fill="#4CAF50"/>
<path d="M26.8962 24.0061C26.486 25.1642 24.8583 26.1247 23.5599 26.4052C22.6717 26.5944 21.5114 26.7452 17.6057 25.126C12.6098 23.0562 9.39255 17.9796 9.1418 17.6502C8.90167 17.3209 7.12305 14.9621 7.12305 12.5226C7.12305 10.0831 8.36192 8.89524 8.8613 8.38524C9.27142 7.96661 9.9493 7.77536 10.5995 7.77536C10.8099 7.77536 10.999 7.78599 11.169 7.79449C11.6684 7.81574 11.9192 7.84549 12.2485 8.63386C12.6587 9.62199 13.6574 12.0615 13.7764 12.3122C13.8975 12.563 14.0187 12.903 13.8487 13.2324C13.6893 13.5724 13.549 13.7232 13.2983 14.0122C13.0475 14.3012 12.8095 14.5222 12.5588 14.8325C12.3293 15.1024 12.07 15.3914 12.359 15.8907C12.648 16.3795 13.6468 18.0094 15.1173 19.3184C17.0149 21.0077 18.5534 21.5475 19.1038 21.777C19.5139 21.947 20.0027 21.9066 20.3023 21.5879C20.6827 21.1777 21.1523 20.4977 21.6304 19.8284C21.9704 19.3481 22.3997 19.2886 22.8502 19.4586C23.3092 19.618 25.738 20.8186 26.2374 21.0672C26.7368 21.318 27.0662 21.437 27.1873 21.6474C27.3063 21.8577 27.3063 22.8459 26.8962 24.0061Z" fill="white"/>
</g>
<defs>
<clipPath id="clip0_3715_5437">
<rect width="34" height="34" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

2
desafio-react-typescript/src/components/Footer/Footer.tsx
View File

@ -3,6 +3,7 @@ import FooterBottom from "./components/FooterBottom/FooterBottom";
import FooterTop from "./components/FooterTop.tsx/FooterTop";
import Newsletter from "./components/Newsletter/Newsletter";
import ScrollLink from "./components/ScrollLink/ScrollLink";
const Footer = () => {
return (
@ -10,6 +11,7 @@ const Footer = () => {
<Newsletter />
<FooterTop />
<FooterBottom />
<ScrollLink />
</footer>
);
};

3
desafio-react-typescript/src/components/Footer/components/FooterTop.tsx/FooterTop.module.scss
View File

@ -19,6 +19,8 @@
@include mq($lg, max) {
flex-direction: column;
width: 100%;
gap: 12px;
}
@include mq($xl, min) {
@ -34,3 +36,4 @@
}
}
}

13
desafio-react-typescript/src/components/Footer/components/FooterTop.tsx/FooterTop.tsx
View File

@ -1,24 +1,25 @@
import React from "react";
import MenuListInfo from "./components/MenuListInfo";
import MenuListLink from "./components/MenuListLink";
import MenuListInfo from "./components/InfoFaleConosco";
import RedesSociais from "./components/RedesSociais";
import styles from "./FooterTop.module.scss";
import InfoLinks from "./components/InfoLinks";
const FooterTop = () => {
return (
<div className={styles["footerTop"]}>
<div className={styles["footerTop__menu-link-wrapper"]}>
<MenuListLink
title="institucional"
<InfoLinks
title="Institucional"
list={[
"Quem somos",
"Política de Privacidade",
"Politíca de Privacidade",
"Segurança",
"Seja um Revendedor",
]}
/>
<MenuListLink
<InfoLinks
title="Dúvidas"
list={[
"Entrega",

20
desafio-react-typescript/src/components/Footer/components/FooterTop.tsx/components/MenuListInfo.module.scss → desafio-react-typescript/src/components/Footer/components/FooterTop.tsx/components/InfoFaleConosco.module.scss
View File

@ -3,6 +3,26 @@
.menu-list {
width: 21.923623%;
@include mq($lg, max) {
width: 100%;
}
&__unselect{
display: none;
}
&__title-wrapper {
@include display(flex, row, center, space-between);
img {
display: none;
@include mq($lg, max) {
display: block;
}
}
}
&__title {
@include fontStyle(500, 14px, 16px, $primary-200);
text-transform: uppercase;

56
desafio-react-typescript/src/components/Footer/components/FooterTop.tsx/components/InfoFaleConosco.tsx Normal file
View File

@ -0,0 +1,56 @@
import React, { useState, useEffect } from "react";
import styles from "./InfoFaleConosco.module.scss";
import plus from "../../../../../assets/svgs/plus.svg";
const InfoFaleConosco = () => {
const verificarTamanhoDaWindow = () => {
if (window.innerWidth <= 1024) {
return false;
} else {
return true;
}
};
const [isActive, setIsActive] = useState(verificarTamanhoDaWindow());
useEffect(() => {
window.addEventListener("resize", () => {
if (window.innerWidth <= 1024) {
setIsActive(false);
} else {
setIsActive(true);
}
});
});
return (
<section className={styles["menu-list"]}>
<div className={styles["menu-list__title-wrapper"]}>
<h4 className={styles["menu-list__title"]}>Fale Conosco</h4>
<img
src={plus}
alt="Abrir/Fechar"
onClick={() => setIsActive(!isActive)}
/>
</div>
{isActive && (
<ul
className={
isActive
? `${styles["menu-list__container"]}`
: `${styles["menu-list__unselect"]}`
}
>
<li className={styles["menu-list__item"]}>
Atendimento Ao Consumidor
</li>
<li className={styles["menu-list__telephone"]}>(11) 4159 9504</li>
<li className={styles["menu-list__item"]}>Atendimento Online</li>
<li className={styles["menu-list__telephone"]}>(11) 99433-8825</li>
</ul>
)}
</section>
);
};
export default InfoFaleConosco;

21
desafio-react-typescript/src/components/Footer/components/FooterTop.tsx/components/MenuListLink.module.scss → desafio-react-typescript/src/components/Footer/components/FooterTop.tsx/components/InfoLinks.module.scss
View File

@ -2,6 +2,27 @@
.menu-list {
width: 21.923623%;
@include mq($lg, max) {
width: 100%;
}
&__unselect{
display: none;
}
&__title-wrapper {
@include display(flex, row, center, space-between);
img {
display: none;
@include mq($lg, max) {
display: block;
}
}
}
&__title {
@include fontStyle(500, 14px, 16px, $primary-200);
text-transform: uppercase;

62
desafio-react-typescript/src/components/Footer/components/FooterTop.tsx/components/InfoLinks.tsx Normal file
View File

@ -0,0 +1,62 @@
import React, { useState, useEffect } from "react";
import styles from "./InfoLinks.module.scss";
import plus from "../../../../../assets/svgs/plus.svg";
interface IInfoLinks {
title: string;
list: Array<string>;
}
const InfoLinks = ({ title, list }: IInfoLinks) => {
const verificarTamanhoDaWindow = () => {
if (window.innerWidth <= 1024) {
return false;
} else {
return true;
}
};
const [isActive, setIsActive] = useState(verificarTamanhoDaWindow());
useEffect(() => {
window.addEventListener("resize", () => {
if (window.innerWidth <= 1024) {
setIsActive(false);
} else {
setIsActive(true);
}
});
});
return (
<section className={styles["menu-list"]}>
<div className={styles["menu-list__title-wrapper"]}>
<h4 className={styles["menu-list__title"]}>{title}</h4>
<img
src={plus}
alt="Abrir/Fechar"
onClick={() => setIsActive(!isActive)}
/>
</div>
{isActive && <ul
className={styles["menu-list__container"]}
>
{list.map((item, index) => {
return (
<li key={index}>
<a className={styles["menu-list__item"]} href="/">
{item}
</a>
</li>
);
})}
</ul>}
</section>
);
};
export default InfoLinks;

22
desafio-react-typescript/src/components/Footer/components/FooterTop.tsx/components/MenuListInfo.tsx
View File

@ -1,22 +0,0 @@
import React from "react";
import styles from "./MenuListInfo.module.scss";
const MenuListInfo = () => {
return (
<div className={styles["menu-list"]}>
<h4 className={styles["menu-list__title"]}>Fale Conosco</h4>
<ul className={styles["menu-list__container"]}>
<li className={styles["menu-list__item"]}>Atendimento Ao Consumidor</li>
<li className={styles["menu-list__telephone"]}>(11) 4159 9504</li>
<li className={styles["menu-list__item"]}>Atendimento Online</li>
<li className={styles["menu-list__telephone"]}>(11) 99433-8825</li>
</ul>
</div>
);
};
export default MenuListInfo;

25
desafio-react-typescript/src/components/Footer/components/FooterTop.tsx/components/MenuListLink.tsx
View File

@ -1,25 +0,0 @@
import React from "react";
import styles from "./MenuListLink.module.scss";
interface MenuListLinkProps {
title: string;
list: Array<string>;
}
const MenuListLink = ({ title, list }: MenuListLinkProps) => {
return (
<div className={styles["menu-list"]}>
<h4 className={styles["menu-list__title"]}>{title}</h4>
<ul className={styles["menu-list__container"]}>
{list.map((item, index) => (
<li key={index}>
<a className={styles["menu-list__item"]} href="/">
{item}
</a>
</li>
))}
</ul>
</div>
);
};
export default MenuListLink;

59
desafio-react-typescript/src/components/Footer/components/ScrollLink/ScrollLink.module.scss Normal file
View File

@ -0,0 +1,59 @@
@import "../../../../styles/all.scss";
.scroll-link {
background: red;
&__whatsapp {
position: fixed;
z-index: 15;
bottom: 228px;
right: 16px;
@include mq($lg, max) {
bottom: 59px;
}
@include mq($sm, max) {
bottom: 67px;
}
@include mq($xl, min) {
bottom: 300px;
img {
width: 64px;
}
}
}
&__up {
background-color: $primary-600;
position: fixed;
z-index: 15;
bottom: 189px;
right: 16px;
border-radius: 50%;
padding: 13px 10px 14px 11px;
width: 34px;
height: 34px;
@include display(flex, row, center, center);
@include mq($lg, max) {
bottom: 20px;
}
@include mq($sm, max) {
bottom: 28px;
}
@include mq($xl, min) {
bottom: 229px;
width: 64px;
height: 64px;
padding: 25px 20.86px 28px 21px;
img {
scale: 2;
}
}
}
}

40
desafio-react-typescript/src/components/Footer/components/ScrollLink/ScrollLink.tsx Normal file
View File

@ -0,0 +1,40 @@
import React, { useEffect, useState } from "react";
import whatsapp from "../../../../assets/svgs/whatsapp.svg";
import arrowUp from "../../../../assets/svgs/arrow-up.svg";
import styles from "./ScrollLink.module.scss";
const ScrollLink = () => {
const [isShow, setisShow] = useState(false);
useEffect(() => {
window.addEventListener("scroll", () => {
if (window.scrollY > 129) {
setisShow(true);
} else {
setisShow(false);
}
});
});
const scrollToTop = () => {
window.scrollTo({
top: 0,
behavior: "smooth",
});
};
return (
<div className={styles["scroll-link"]}>
<a className={styles["scroll-link__whatsapp"]} href="tel:22-99999-9999">
<img src={whatsapp} alt="Logo do Whatsapp" />
</a>
{isShow && (
<button className={styles["scroll-link__up"]} onClick={scrollToTop}>
<img src={arrowUp} alt="Ir Para o começo da página" />
</button>
)}
</div>
);
};
export default ScrollLink;

2
desafio-react-typescript/src/components/Header/Header.tsx
View File

@ -20,7 +20,7 @@ const Header = () => {
})
return (
<header className={styles["header"]}>
<header id="home" className={styles["header"]}>
<HeaderTop isOpen={isOpen} setIsOpen={setIsOpen} />
<HeaderBottom isOpen={isOpen} setIsOpen={setIsOpen} />
</header>

4
desafio-react-typescript/src/styles/global.scss
View File

@ -7,6 +7,10 @@
font-family: "Roboto", sans-serif;
}
body {
position: relative;
}
//APAGAR A LINHA DEPOIS
body::-webkit-scrollbar {
display: none;