From d4bac5f1e462afbac3cc319c89c7ab7be6d236f1 Mon Sep 17 00:00:00 2001 From: Nicolly Vieira Date: Sat, 7 Jan 2023 13:15:13 -0300 Subject: [PATCH 1/2] feat(Footer): Cria o accorddion para o footer abaixo de 1025px --- .../src/assets/svgs/plus.svg | 3 + .../FooterTop.tsx/FooterTop.module.scss | 3 + .../components/FooterTop.tsx/FooterTop.tsx | 13 ++-- ...odule.scss => InfoFaleConosco.module.scss} | 20 ++++++ .../components/InfoFaleConosco.tsx | 56 +++++++++++++++++ ...Link.module.scss => InfoLinks.module.scss} | 21 +++++++ .../FooterTop.tsx/components/InfoLinks.tsx | 62 +++++++++++++++++++ .../FooterTop.tsx/components/MenuListInfo.tsx | 22 ------- .../FooterTop.tsx/components/MenuListLink.tsx | 25 -------- 9 files changed, 172 insertions(+), 53 deletions(-) create mode 100644 desafio-react-typescript/src/assets/svgs/plus.svg rename desafio-react-typescript/src/components/Footer/components/FooterTop.tsx/components/{MenuListInfo.module.scss => InfoFaleConosco.module.scss} (69%) create mode 100644 desafio-react-typescript/src/components/Footer/components/FooterTop.tsx/components/InfoFaleConosco.tsx rename desafio-react-typescript/src/components/Footer/components/FooterTop.tsx/components/{MenuListLink.module.scss => InfoLinks.module.scss} (68%) create mode 100644 desafio-react-typescript/src/components/Footer/components/FooterTop.tsx/components/InfoLinks.tsx delete mode 100644 desafio-react-typescript/src/components/Footer/components/FooterTop.tsx/components/MenuListInfo.tsx delete mode 100644 desafio-react-typescript/src/components/Footer/components/FooterTop.tsx/components/MenuListLink.tsx diff --git a/desafio-react-typescript/src/assets/svgs/plus.svg b/desafio-react-typescript/src/assets/svgs/plus.svg new file mode 100644 index 0000000..d64bfd8 --- /dev/null +++ b/desafio-react-typescript/src/assets/svgs/plus.svg @@ -0,0 +1,3 @@ + + + diff --git a/desafio-react-typescript/src/components/Footer/components/FooterTop.tsx/FooterTop.module.scss b/desafio-react-typescript/src/components/Footer/components/FooterTop.tsx/FooterTop.module.scss index 2fbbd9d..1d800d8 100644 --- a/desafio-react-typescript/src/components/Footer/components/FooterTop.tsx/FooterTop.module.scss +++ b/desafio-react-typescript/src/components/Footer/components/FooterTop.tsx/FooterTop.module.scss @@ -19,6 +19,8 @@ @include mq($lg, max) { flex-direction: column; + width: 100%; + gap: 12px; } @include mq($xl, min) { @@ -34,3 +36,4 @@ } } } + diff --git a/desafio-react-typescript/src/components/Footer/components/FooterTop.tsx/FooterTop.tsx b/desafio-react-typescript/src/components/Footer/components/FooterTop.tsx/FooterTop.tsx index c7cdbfe..8b9f38a 100644 --- a/desafio-react-typescript/src/components/Footer/components/FooterTop.tsx/FooterTop.tsx +++ b/desafio-react-typescript/src/components/Footer/components/FooterTop.tsx/FooterTop.tsx @@ -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 (
- - { + 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 ( +
+
+

Fale Conosco

+ Abrir/Fechar setIsActive(!isActive)} + /> +
+ {isActive && ( +
    +
  • + Atendimento Ao Consumidor +
    • +
  • (11) 4159 9504
    • +
  • Atendimento Online
    • +
  • (11) 99433-8825
    • +
+ )} +
+ ); +}; + +export default InfoFaleConosco; diff --git a/desafio-react-typescript/src/components/Footer/components/FooterTop.tsx/components/MenuListLink.module.scss b/desafio-react-typescript/src/components/Footer/components/FooterTop.tsx/components/InfoLinks.module.scss similarity index 68% rename from desafio-react-typescript/src/components/Footer/components/FooterTop.tsx/components/MenuListLink.module.scss rename to desafio-react-typescript/src/components/Footer/components/FooterTop.tsx/components/InfoLinks.module.scss index 4e20049..d6eeed6 100644 --- a/desafio-react-typescript/src/components/Footer/components/FooterTop.tsx/components/MenuListLink.module.scss +++ b/desafio-react-typescript/src/components/Footer/components/FooterTop.tsx/components/InfoLinks.module.scss @@ -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; diff --git a/desafio-react-typescript/src/components/Footer/components/FooterTop.tsx/components/InfoLinks.tsx b/desafio-react-typescript/src/components/Footer/components/FooterTop.tsx/components/InfoLinks.tsx new file mode 100644 index 0000000..af38f65 --- /dev/null +++ b/desafio-react-typescript/src/components/Footer/components/FooterTop.tsx/components/InfoLinks.tsx @@ -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; +} + +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 ( +
+
+

{title}

+ Abrir/Fechar setIsActive(!isActive)} + /> +
+ + {isActive &&
    + {list.map((item, index) => { + return ( +
  • + + {item} + +
    • + ); + })} +
} +
+ ); +}; + +export default InfoLinks; diff --git a/desafio-react-typescript/src/components/Footer/components/FooterTop.tsx/components/MenuListInfo.tsx b/desafio-react-typescript/src/components/Footer/components/FooterTop.tsx/components/MenuListInfo.tsx deleted file mode 100644 index 4f83cc7..0000000 --- a/desafio-react-typescript/src/components/Footer/components/FooterTop.tsx/components/MenuListInfo.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import React from "react"; - -import styles from "./MenuListInfo.module.scss"; - - -const MenuListInfo = () => { - return ( -
-

Fale Conosco

-
    -
  • Atendimento Ao Consumidor
    • -
  • (11) 4159 9504
    • -
  • Atendimento Online
    • -
  • (11) 99433-8825
    • - -
-
- ); -}; - -export default MenuListInfo; - diff --git a/desafio-react-typescript/src/components/Footer/components/FooterTop.tsx/components/MenuListLink.tsx b/desafio-react-typescript/src/components/Footer/components/FooterTop.tsx/components/MenuListLink.tsx deleted file mode 100644 index e82fc5a..0000000 --- a/desafio-react-typescript/src/components/Footer/components/FooterTop.tsx/components/MenuListLink.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import React from "react"; - -import styles from "./MenuListLink.module.scss"; -interface MenuListLinkProps { - title: string; - list: Array; -} -const MenuListLink = ({ title, list }: MenuListLinkProps) => { - return ( -
-

{title}

- -
- ); -}; - -export default MenuListLink; -- 2.34.1 From 2531484453d1fc62046af4956a0c8b27aa9cda37 Mon Sep 17 00:00:00 2001 From: Nicolly Vieira Date: Sat, 7 Jan 2023 14:33:36 -0300 Subject: [PATCH 2/2] feat(ScrollLink): Cria todo o ScrollLink --- .../src/assets/svgs/arrow-up.svg | 3 + .../src/assets/svgs/whatsapp.svg | 11 ++++ .../src/components/Footer/Footer.tsx | 2 + .../ScrollLink/ScrollLink.module.scss | 59 +++++++++++++++++++ .../components/ScrollLink/ScrollLink.tsx | 40 +++++++++++++ .../src/components/Header/Header.tsx | 2 +- .../src/styles/global.scss | 4 ++ 7 files changed, 120 insertions(+), 1 deletion(-) create mode 100644 desafio-react-typescript/src/assets/svgs/arrow-up.svg create mode 100644 desafio-react-typescript/src/assets/svgs/whatsapp.svg create mode 100644 desafio-react-typescript/src/components/Footer/components/ScrollLink/ScrollLink.module.scss create mode 100644 desafio-react-typescript/src/components/Footer/components/ScrollLink/ScrollLink.tsx diff --git a/desafio-react-typescript/src/assets/svgs/arrow-up.svg b/desafio-react-typescript/src/assets/svgs/arrow-up.svg new file mode 100644 index 0000000..a217195 --- /dev/null +++ b/desafio-react-typescript/src/assets/svgs/arrow-up.svg @@ -0,0 +1,3 @@ + + + diff --git a/desafio-react-typescript/src/assets/svgs/whatsapp.svg b/desafio-react-typescript/src/assets/svgs/whatsapp.svg new file mode 100644 index 0000000..bab9d43 --- /dev/null +++ b/desafio-react-typescript/src/assets/svgs/whatsapp.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/desafio-react-typescript/src/components/Footer/Footer.tsx b/desafio-react-typescript/src/components/Footer/Footer.tsx index 9cf641d..96f8c61 100644 --- a/desafio-react-typescript/src/components/Footer/Footer.tsx +++ b/desafio-react-typescript/src/components/Footer/Footer.tsx @@ -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 = () => { + ); }; diff --git a/desafio-react-typescript/src/components/Footer/components/ScrollLink/ScrollLink.module.scss b/desafio-react-typescript/src/components/Footer/components/ScrollLink/ScrollLink.module.scss new file mode 100644 index 0000000..c3f590c --- /dev/null +++ b/desafio-react-typescript/src/components/Footer/components/ScrollLink/ScrollLink.module.scss @@ -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; + } + } + } +} diff --git a/desafio-react-typescript/src/components/Footer/components/ScrollLink/ScrollLink.tsx b/desafio-react-typescript/src/components/Footer/components/ScrollLink/ScrollLink.tsx new file mode 100644 index 0000000..fe7cdb8 --- /dev/null +++ b/desafio-react-typescript/src/components/Footer/components/ScrollLink/ScrollLink.tsx @@ -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 ( +
+ + Logo do Whatsapp + + {isShow && ( + + )} +
+ ); +}; + +export default ScrollLink; diff --git a/desafio-react-typescript/src/components/Header/Header.tsx b/desafio-react-typescript/src/components/Header/Header.tsx index 0defaec..72b1705 100644 --- a/desafio-react-typescript/src/components/Header/Header.tsx +++ b/desafio-react-typescript/src/components/Header/Header.tsx @@ -20,7 +20,7 @@ const Header = () => { }) return ( -
+
diff --git a/desafio-react-typescript/src/styles/global.scss b/desafio-react-typescript/src/styles/global.scss index 6a41bb6..0affd6b 100644 --- a/desafio-react-typescript/src/styles/global.scss +++ b/desafio-react-typescript/src/styles/global.scss @@ -7,6 +7,10 @@ font-family: "Roboto", sans-serif; } +body { + position: relative; +} + //APAGAR A LINHA DEPOIS body::-webkit-scrollbar { display: none; -- 2.34.1