From 4934bd2595ae27a95cdfe6934bb02131a69ffae9 Mon Sep 17 00:00:00 2001 From: Bernardo Waldhelm Date: Thu, 12 Jan 2023 15:03:07 -0300 Subject: [PATCH] =?UTF-8?q?refactor:=20adicionando=20footers=20a=20nova=20?= =?UTF-8?q?padroniza=C3=A7=C3=A3o=20de=20components?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Footer/Footer.tsx | 17 -- .../Footer/FooterBottom/FooterBottom.tsx | 66 ------ src/components/Footer/FooterTop/FooterTop.tsx | 169 --------------- .../{ => organisms}/Footer/Footer.module.scss | 2 +- src/components/organisms/Footer/Footer.tsx | 17 ++ .../FooterBottom/FooterBottom.module.scss | 2 +- .../Footer/FooterBottom/FooterBottom.tsx | 78 +++++++ .../FooterNewsletter.module.scss | 2 +- .../FooterNewsletter/FooterNewsletter.tsx | 0 .../Footer/FooterTop/FooterTop.scss | 2 +- .../organisms/Footer/FooterTop/FooterTop.tsx | 194 ++++++++++++++++++ src/pages/Home.tsx | 2 +- 12 files changed, 294 insertions(+), 257 deletions(-) delete mode 100644 src/components/Footer/Footer.tsx delete mode 100644 src/components/Footer/FooterBottom/FooterBottom.tsx delete mode 100644 src/components/Footer/FooterTop/FooterTop.tsx rename src/components/{ => organisms}/Footer/Footer.module.scss (88%) create mode 100644 src/components/organisms/Footer/Footer.tsx rename src/components/{ => organisms}/Footer/FooterBottom/FooterBottom.module.scss (99%) create mode 100644 src/components/organisms/Footer/FooterBottom/FooterBottom.tsx rename src/components/{ => organisms}/Footer/FooterNewsletter/FooterNewsletter.module.scss (99%) rename src/components/{ => organisms}/Footer/FooterNewsletter/FooterNewsletter.tsx (100%) rename src/components/{ => organisms}/Footer/FooterTop/FooterTop.scss (99%) create mode 100644 src/components/organisms/Footer/FooterTop/FooterTop.tsx diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx deleted file mode 100644 index 61f48f5..0000000 --- a/src/components/Footer/Footer.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import { FooterNewsletter } from './FooterNewsletter/FooterNewsletter'; -import { FooterTop } from './FooterTop/FooterTop'; -import { FooterBottom } from './FooterBottom/FooterBottom'; - -import styles from './Footer.module.scss'; - -const Footer = () => { - return ( - - ) -} - -export { Footer } diff --git a/src/components/Footer/FooterBottom/FooterBottom.tsx b/src/components/Footer/FooterBottom/FooterBottom.tsx deleted file mode 100644 index c818193..0000000 --- a/src/components/Footer/FooterBottom/FooterBottom.tsx +++ /dev/null @@ -1,66 +0,0 @@ -import styles from './FooterBottom.module.scss' - -import boleto from '../../../assets/imgs/boleto.png'; -import diners from '../../../assets/imgs/diners.png'; -import elo from '../../../assets/imgs/elo.png'; -import hiper from '../../../assets/imgs/hiper.png'; -import master from '../../../assets/imgs/master.png'; -import pagseguro from '../../../assets/imgs/pagseguro.png'; -import visa from '../../../assets/imgs/visa.png'; -import vtex from '../../../assets/imgs/vtex-pci-200.png'; -import vtexLogo from '../../../assets/imgs/vtex-logo.png'; -import m3Logo from '../../../assets/imgs/m3-logo-footer.png'; - -const FooterBottom = () => { - return ( -
-

- Lorem ipsum dolor sit amet, consectetur adipiscing
- elit, sed do eiusmod tempor -

-
-
    -
  • - Cartão Mastercard -
    • -
  • - Cartão Visa -
    • -
  • - Cartão American Express -
    • -
  • - Cartão Elo -
    • -
  • - Cartão Hipercard -
    • -
  • - PagSeguro -
    • -
  • - Boleto -
    • -
-
-
    -
  • - Vtex PCI - SECURITY -
    • -
-
-
- - Powered By - Logo Vtex - - - Developed By - Logo M3 - -
-
- ) -} - -export { FooterBottom } diff --git a/src/components/Footer/FooterTop/FooterTop.tsx b/src/components/Footer/FooterTop/FooterTop.tsx deleted file mode 100644 index bf4dcd2..0000000 --- a/src/components/Footer/FooterTop/FooterTop.tsx +++ /dev/null @@ -1,169 +0,0 @@ -import { useState } from 'react'; - -import './FooterTop.scss' - -import facebook from '../../../assets/imgs/logo-facebook.png'; -import instagram from '../../../assets/imgs/logo-instagram.png'; -import twitter from '../../../assets/imgs/logo-twitter.png'; -import youtube from '../../../assets/imgs/logo-youtube.png'; -import linkedin from '../../../assets/imgs/logo-linkedin.png'; - -import { Accordion } from '../../Accordion'; -import { AccordionProvider } from '../../Accordion/context/ContentAccordion'; - -const FooterTop = () => { - - const [ulIsVisible, setUlIsVisible] = useState(''); - - const handleSetCurrent = (customKey: string | number | '') => { - if (window.innerWidth < 1025) { - if (customKey === ulIsVisible) { - setUlIsVisible('') - }else { - setUlIsVisible(customKey) - } - } - console.log('funcionando', customKey); - - } - - return ( -
-
- - - - - - - - - - -
- -

Fale Conosco

- - - - -
- - - - - -
- - www.loremipsum.com -
-
- -
- ) -} - -export { FooterTop } diff --git a/src/components/Footer/Footer.module.scss b/src/components/organisms/Footer/Footer.module.scss similarity index 88% rename from src/components/Footer/Footer.module.scss rename to src/components/organisms/Footer/Footer.module.scss index b8cdfba..98a062a 100644 --- a/src/components/Footer/Footer.module.scss +++ b/src/components/organisms/Footer/Footer.module.scss @@ -1,4 +1,4 @@ -@import '../../variaveis'; +@import '../../../variaveis'; .footer { position: sticky; diff --git a/src/components/organisms/Footer/Footer.tsx b/src/components/organisms/Footer/Footer.tsx new file mode 100644 index 0000000..69f5378 --- /dev/null +++ b/src/components/organisms/Footer/Footer.tsx @@ -0,0 +1,17 @@ +import { FooterNewsletter } from "./FooterNewsletter/FooterNewsletter"; +import { FooterTop } from "./FooterTop/FooterTop"; +import { FooterBottom } from "./FooterBottom/FooterBottom"; + +import styles from "./Footer.module.scss"; + +const Footer = () => { + return ( +
+ + + +
+ ); +}; + +export { Footer }; diff --git a/src/components/Footer/FooterBottom/FooterBottom.module.scss b/src/components/organisms/Footer/FooterBottom/FooterBottom.module.scss similarity index 99% rename from src/components/Footer/FooterBottom/FooterBottom.module.scss rename to src/components/organisms/Footer/FooterBottom/FooterBottom.module.scss index d19ffd3..61a2390 100644 --- a/src/components/Footer/FooterBottom/FooterBottom.module.scss +++ b/src/components/organisms/Footer/FooterBottom/FooterBottom.module.scss @@ -1,4 +1,4 @@ -@import '../../../variaveis'; +@import '../../../../variaveis'; .footer__bottom { width: calc(100% - 200px); diff --git a/src/components/organisms/Footer/FooterBottom/FooterBottom.tsx b/src/components/organisms/Footer/FooterBottom/FooterBottom.tsx new file mode 100644 index 0000000..58f2257 --- /dev/null +++ b/src/components/organisms/Footer/FooterBottom/FooterBottom.tsx @@ -0,0 +1,78 @@ +import styles from "./FooterBottom.module.scss"; + +import boleto from "../../../../assets/imgs/boleto.png"; +import diners from "../../../../assets/imgs/diners.png"; +import elo from "../../../../assets/imgs/elo.png"; +import hiper from "../../../../assets/imgs/hiper.png"; +import master from "../../../../assets/imgs/master.png"; +import pagseguro from "../../../../assets/imgs/pagseguro.png"; +import visa from "../../../../assets/imgs/visa.png"; +import vtex from "../../../../assets/imgs/vtex-pci-200.png"; +import vtexLogo from "../../../../assets/imgs/vtex-logo.png"; +import m3Logo from "../../../../assets/imgs/m3-logo-footer.png"; + +const FooterBottom = () => { + return ( +
+

+ Lorem ipsum dolor sit amet, consectetur adipiscing
+ elit, sed do eiusmod tempor +

+
+
    +
  • + Cartão Mastercard +
    • +
  • + Cartão Visa +
    • +
  • + Cartão American Express +
    • +
  • + Cartão Elo +
    • +
  • + Cartão Hipercard +
    • +
  • + PagSeguro +
    • +
  • + Boleto +
    • +
+
+
    +
  • + Vtex PCI - SECURITY +
    • +
+
+
+ + Powered By + Logo Vtex + + + Developed By + Logo M3 + +
+
+ ); +}; + +export { FooterBottom }; diff --git a/src/components/Footer/FooterNewsletter/FooterNewsletter.module.scss b/src/components/organisms/Footer/FooterNewsletter/FooterNewsletter.module.scss similarity index 99% rename from src/components/Footer/FooterNewsletter/FooterNewsletter.module.scss rename to src/components/organisms/Footer/FooterNewsletter/FooterNewsletter.module.scss index 6231c04..4199ecd 100644 --- a/src/components/Footer/FooterNewsletter/FooterNewsletter.module.scss +++ b/src/components/organisms/Footer/FooterNewsletter/FooterNewsletter.module.scss @@ -1,4 +1,4 @@ -@import "../../../variaveis"; +@import "../../../../variaveis"; .footer-newsletter { width: 100%; diff --git a/src/components/Footer/FooterNewsletter/FooterNewsletter.tsx b/src/components/organisms/Footer/FooterNewsletter/FooterNewsletter.tsx similarity index 100% rename from src/components/Footer/FooterNewsletter/FooterNewsletter.tsx rename to src/components/organisms/Footer/FooterNewsletter/FooterNewsletter.tsx diff --git a/src/components/Footer/FooterTop/FooterTop.scss b/src/components/organisms/Footer/FooterTop/FooterTop.scss similarity index 99% rename from src/components/Footer/FooterTop/FooterTop.scss rename to src/components/organisms/Footer/FooterTop/FooterTop.scss index b840330..90516a3 100644 --- a/src/components/Footer/FooterTop/FooterTop.scss +++ b/src/components/organisms/Footer/FooterTop/FooterTop.scss @@ -1,4 +1,4 @@ -@import '../../../variaveis'; +@import '../../../../variaveis'; .footer__top { width: calc(100% - 200px); diff --git a/src/components/organisms/Footer/FooterTop/FooterTop.tsx b/src/components/organisms/Footer/FooterTop/FooterTop.tsx new file mode 100644 index 0000000..6464ca8 --- /dev/null +++ b/src/components/organisms/Footer/FooterTop/FooterTop.tsx @@ -0,0 +1,194 @@ +import { useState } from "react"; + +import "./FooterTop.scss"; + +import facebook from "../../../../assets/imgs/logo-facebook.png"; +import instagram from "../../../../assets/imgs/logo-instagram.png"; +import twitter from "../../../../assets/imgs/logo-twitter.png"; +import youtube from "../../../../assets/imgs/logo-youtube.png"; +import linkedin from "../../../../assets/imgs/logo-linkedin.png"; + +import { Accordion } from "../../../Accordion"; +import { AccordionProvider } from "../../../Accordion/context/ContentAccordion"; + +const FooterTop = () => { + const [ulIsVisible, setUlIsVisible] = useState(""); + + const handleSetCurrent = (customKey: string | number | "") => { + if (window.innerWidth < 1025) { + if (customKey === ulIsVisible) { + setUlIsVisible(""); + } else { + setUlIsVisible(customKey); + } + } + console.log("funcionando", customKey); + }; + + return ( +
+
+ + + + + + + + + + +
+ +

Fale Conosco

+ + + + +
+ + + +
+ + + www.loremipsum.com + +
+
+
+ ); +}; + +export { FooterTop }; diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx index 7eb79e9..f56a70a 100644 --- a/src/pages/Home.tsx +++ b/src/pages/Home.tsx @@ -4,7 +4,7 @@ import { Header } from "../components/organisms/Header/Header"; import { BreadCrumbs } from "../components/molecules/Breadcrumbs/Breadcrumbs"; import { Main } from "../components/Main/Main"; import { ButtonsFixeds } from "../components/Atoms/ButtonsFixed/ButtonsFixed"; -import { Footer } from "../components/Footer/Footer"; +import { Footer } from "../components/organisms/Footer/Footer"; function Home() { return (