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

refactor: adicionando footers a nova padronização de components

Browse Source
This commit is contained in:
Bernardo Cunha Ernani Waldhelm 2023-01-12 15:03:07 -03:00
parent 0a00b8819e
commit 4934bd2595
12 changed files with 294 additions and 257 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/components/Footer/Footer.tsx
View File

@ -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 (
<footer className={styles['footer']}>
<FooterNewsletter />
<FooterTop />
<FooterBottom />
</footer>
)
}
export { Footer }

66
src/components/Footer/FooterBottom/FooterBottom.tsx
View File

@ -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 (
<section className={styles['footer__bottom']}>
<p className={styles['footer__bottom__paragrafo']}>
Lorem ipsum dolor sit amet, consectetur adipiscing <br/>
elit, sed do eiusmod tempor
</p>
<div className={styles['footer__bottom__payments']}>
<ul className={styles['footer__bottom__payments__cards']}>
<li className={styles['footer__bottom__payments__cards__card']}>
<img src={master} alt="Cartão Mastercard" />
</li>
<li className={styles['footer__bottom__payments__cards__card']}>
<img src={visa} alt="Cartão Visa" />
</li>
<li className={styles['footer__bottom__payments__cards__card']}>
<img src={diners} alt="Cartão American Express" />
</li>
<li className={styles['footer__bottom__payments__cards__card']}>
<img src={elo} alt="Cartão Elo" />
</li>
<li className={styles['footer__bottom__payments__cards__card']}>
<img src={hiper} alt="Cartão Hipercard" />
</li>
<li className={styles['footer__bottom__payments__cards__card']}>
<img src={pagseguro} alt="PagSeguro" />
</li>
<li className={styles['footer__bottom__payments__cards__card']}>
<img src={boleto} alt="Boleto" />
</li>
</ul>
<div className={styles['footer__bottom__payments__divider']}></div>
<ul className={styles['footer__bottom__payments__security']}>
<li className={styles['footer__bottom__payments-cards__card']}>
<img src={vtex} alt="Vtex PCI - SECURITY" />
</li>
</ul>
</div>
<div className={styles['footer__bottom__development']}>
<a className={styles['footer__bottom__development__logo']} href="https://vtex.com/" rel='noreferrer' target="_blank" title="M3">
<span>Powered By</span>
<img src={vtexLogo} alt='Logo Vtex'/>
</a>
<a className={styles['footer__bottom__development__logo']} href="http://m3ecommerce.com/" rel='noreferrer' target="_blank" title="VTEX">
<span>Developed By</span>
<img src={m3Logo} alt='Logo M3'/>
</a>
</div>
</section>
)
}
export { FooterBottom }

169
src/components/Footer/FooterTop/FooterTop.tsx
View File

@ -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<string | number | ''>('');
const handleSetCurrent = (customKey: string | number | '') => {
if (window.innerWidth < 1025) {
if (customKey === ulIsVisible) {
setUlIsVisible('')
}else {
setUlIsVisible(customKey)
}
}
console.log('funcionando', customKey);
}
return (
<section className={'footer__top'}>
<div className={'footer__top__wrapper'}>
<AccordionProvider value={{current:ulIsVisible, handleSetCurrent}}>
<Accordion customKey={1}>
<div className={'footer__top__block'}>
<Accordion.Header customKey={1}>
<h4 className={`footer__top__block__title`}> INSTITUCIONAL </h4>
</Accordion.Header>
<Accordion.Content>
<ul className={'footer__top__block__item-list'}>
<li className={'footer__top__block__item'}>
<a href="/" className={'footer__top__block__link'}>
Quem Somos
</a>
</li>
<li className={'footer__top__block__item'}>
<a href="/" className={'footer__top__block__link'}>
Política de Privacidade
</a>
</li>
<li className={'footer__top__block__item'}>
<a href="/" className={'footer__top__block__link'}>
Segurança
</a>
</li>
<li className={'footer__top__block__item'}>
<a href="/" className={'footer__top__block__link'}>
Seja um Revendedor
</a>
</li>
</ul>
</Accordion.Content>
</div>
</Accordion>
<Accordion customKey={2}>
<div className={'footer__top__block'}>
<Accordion.Header customKey={2}>
<h4 className={`footer__top__block__title`} > DÚVIDAS </h4>
</Accordion.Header>
<Accordion.Content>
<ul className={'footer__top__block__item-list'}>
<li className={'footer__top__block__item'}>
<a href="/" className={'footer__top__block__link'}>
Entrega
</a>
</li>
<li className={'footer__top__block__item'}>
<a href="/" className={'footer__top__block__link'}>
Pagamento
</a>
</li>
<li className={'footer__top__block__item'}>
<a href="/" className={'footer__top__block__link'}>
Trocas e Devoluções
</a>
</li>
<li className={'footer__top__block__item'}>
<a href="/" className={'footer__top__block__link'}>
Dúvidas Frequentes
</a>
</li>
</ul>
</Accordion.Content>
</div>
</Accordion>
<Accordion customKey={3}>
<div className={'footer__top__block'}>
<Accordion.Header customKey={3}>
<h4 className={`footer__top__block__title`}> Fale Conosco </h4>
</Accordion.Header>
<Accordion.Content>
<ul className={'footer__top__block__item-list'}>
<li className={'footer__top__block__item'}>
<span className={'footer__top__block__link'}>
<strong>Atendimento Ao <br/> Consumidor</strong>
</span>
</li>
<li className={'footer__top__block__item'}>
<a href="http://wa.me/(11)4159 9504" target='_blank' rel='noreferrer' className={'footer__top__block__link'}>
(11) 4159 9504
</a>
</li>
<li className={'footer__top__block__item'}>
<span className={'footer__top__block__link'}>
<strong>Atendimento Online</strong>
</span>
</li>
<li className={'footer__top__block__item'}>
<a href="http://wa.me/(11)99433-8825" target='_blank' rel='noreferrer' className={'footer__top__block__link'}>
(11) 99433-8825
</a>
</li>
</ul>
</Accordion.Content>
</div>
</Accordion>
</AccordionProvider>
<div className={'footer__top__block-social'}>
<ul className={'footer__top__block-social__social-medias'}>
<li className={'footer__top__block-social__social-medias__logo'}>
<a href="https://www.facebook.com/digitalm3" target='_blank' rel='noreferrer' >
<img src={facebook} alt="Logo Facebook" />
</a>
</li>
<li className={'footer__top__block-social__social-medias__logo'}>
<a href="https://www.instagram.com/m3.ecommerce/" target='_blank' rel='noreferrer' >
<img src={instagram} alt="Logo instagram" />
</a>
</li>
<li className={'footer__top__block-social__social-medias__logo'}>
<a href="https://twitter.com/home" target='_blank' rel='noreferrer' >
<img src={twitter} alt="Logo twitter" />
</a>
</li>
<li className={'footer__top__block-social__social-medias__logo'}>
<a href="https://www.youtube.com/@m3e-commerce796" target='_blank' rel='noreferrer' >
<img src={youtube} alt="Logo youtube" />
</a>
</li>
<li className={'footer__top__block-social__social-medias__logo'}>
<a href="https://www.linkedin.com/company/m3ecommerce/" target='_blank' rel='noreferrer' >
<img src={linkedin} alt="Logo linkedin" />
</a>
</li>
</ul>
<span className={'footer__top__block-social__social-medias__site'}>www.loremipsum.com</span>
</div>
</div>
</section>
)
}
export { FooterTop }

2
src/components/Footer/Footer.module.scss → src/components/organisms/Footer/Footer.module.scss
View File

@ -1,4 +1,4 @@
@import '../../variaveis';
@import '../../../variaveis';
.footer {
position: sticky;

17
src/components/organisms/Footer/Footer.tsx Normal file
View File

@ -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 (
<footer className={styles["footer"]}>
<FooterNewsletter />
<FooterTop />
<FooterBottom />
</footer>
);
};
export { Footer };

2
src/components/Footer/FooterBottom/FooterBottom.module.scss → src/components/organisms/Footer/FooterBottom/FooterBottom.module.scss
View File

@ -1,4 +1,4 @@
@import '../../../variaveis';
@import '../../../../variaveis';
.footer__bottom {
width: calc(100% - 200px);

78
src/components/organisms/Footer/FooterBottom/FooterBottom.tsx Normal file
View File

@ -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 (
<section className={styles["footer__bottom"]}>
<p className={styles["footer__bottom__paragrafo"]}>
Lorem ipsum dolor sit amet, consectetur adipiscing <br />
elit, sed do eiusmod tempor
</p>
<div className={styles["footer__bottom__payments"]}>
<ul className={styles["footer__bottom__payments__cards"]}>
<li className={styles["footer__bottom__payments__cards__card"]}>
<img src={master} alt="Cartão Mastercard" />
</li>
<li className={styles["footer__bottom__payments__cards__card"]}>
<img src={visa} alt="Cartão Visa" />
</li>
<li className={styles["footer__bottom__payments__cards__card"]}>
<img src={diners} alt="Cartão American Express" />
</li>
<li className={styles["footer__bottom__payments__cards__card"]}>
<img src={elo} alt="Cartão Elo" />
</li>
<li className={styles["footer__bottom__payments__cards__card"]}>
<img src={hiper} alt="Cartão Hipercard" />
</li>
<li className={styles["footer__bottom__payments__cards__card"]}>
<img src={pagseguro} alt="PagSeguro" />
</li>
<li className={styles["footer__bottom__payments__cards__card"]}>
<img src={boleto} alt="Boleto" />
</li>
</ul>
<div className={styles["footer__bottom__payments__divider"]}></div>
<ul className={styles["footer__bottom__payments__security"]}>
<li className={styles["footer__bottom__payments-cards__card"]}>
<img src={vtex} alt="Vtex PCI - SECURITY" />
</li>
</ul>
</div>
<div className={styles["footer__bottom__development"]}>
<a
className={styles["footer__bottom__development__logo"]}
href="https://vtex.com/"
rel="noreferrer"
target="_blank"
title="M3"
>
<span>Powered By</span>
<img src={vtexLogo} alt="Logo Vtex" />
</a>
<a
className={styles["footer__bottom__development__logo"]}
href="http://m3ecommerce.com/"
rel="noreferrer"
target="_blank"
title="VTEX"
>
<span>Developed By</span>
<img src={m3Logo} alt="Logo M3" />
</a>
</div>
</section>
);
};
export { FooterBottom };

2
src/components/Footer/FooterNewsletter/FooterNewsletter.module.scss → src/components/organisms/Footer/FooterNewsletter/FooterNewsletter.module.scss
View File

@ -1,4 +1,4 @@
@import "../../../variaveis";
@import "../../../../variaveis";
.footer-newsletter {
width: 100%;

0
src/components/Footer/FooterNewsletter/FooterNewsletter.tsx → src/components/organisms/Footer/FooterNewsletter/FooterNewsletter.tsx
View File

2
src/components/Footer/FooterTop/FooterTop.scss → src/components/organisms/Footer/FooterTop/FooterTop.scss
View File

@ -1,4 +1,4 @@
@import '../../../variaveis';
@import '../../../../variaveis';
.footer__top {
width: calc(100% - 200px);

194
src/components/organisms/Footer/FooterTop/FooterTop.tsx Normal file
View File

@ -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<string | number | "">("");
const handleSetCurrent = (customKey: string | number | "") => {
if (window.innerWidth < 1025) {
if (customKey === ulIsVisible) {
setUlIsVisible("");
} else {
setUlIsVisible(customKey);
}
}
console.log("funcionando", customKey);
};
return (
<section className={"footer__top"}>
<div className={"footer__top__wrapper"}>
<AccordionProvider value={{ current: ulIsVisible, handleSetCurrent }}>
<Accordion customKey={1}>
<div className={"footer__top__block"}>
<Accordion.Header customKey={1}>
<h4 className={`footer__top__block__title`}> INSTITUCIONAL </h4>
</Accordion.Header>
<Accordion.Content>
<ul className={"footer__top__block__item-list"}>
<li className={"footer__top__block__item"}>
<a href="/" className={"footer__top__block__link"}>
Quem Somos
</a>
</li>
<li className={"footer__top__block__item"}>
<a href="/" className={"footer__top__block__link"}>
Política de Privacidade
</a>
</li>
<li className={"footer__top__block__item"}>
<a href="/" className={"footer__top__block__link"}>
Segurança
</a>
</li>
<li className={"footer__top__block__item"}>
<a href="/" className={"footer__top__block__link"}>
Seja um Revendedor
</a>
</li>
</ul>
</Accordion.Content>
</div>
</Accordion>
<Accordion customKey={2}>
<div className={"footer__top__block"}>
<Accordion.Header customKey={2}>
<h4 className={`footer__top__block__title`}> DÚVIDAS </h4>
</Accordion.Header>
<Accordion.Content>
<ul className={"footer__top__block__item-list"}>
<li className={"footer__top__block__item"}>
<a href="/" className={"footer__top__block__link"}>
Entrega
</a>
</li>
<li className={"footer__top__block__item"}>
<a href="/" className={"footer__top__block__link"}>
Pagamento
</a>
</li>
<li className={"footer__top__block__item"}>
<a href="/" className={"footer__top__block__link"}>
Trocas e Devoluções
</a>
</li>
<li className={"footer__top__block__item"}>
<a href="/" className={"footer__top__block__link"}>
Dúvidas Frequentes
</a>
</li>
</ul>
</Accordion.Content>
</div>
</Accordion>
<Accordion customKey={3}>
<div className={"footer__top__block"}>
<Accordion.Header customKey={3}>
<h4 className={`footer__top__block__title`}> Fale Conosco </h4>
</Accordion.Header>
<Accordion.Content>
<ul className={"footer__top__block__item-list"}>
<li className={"footer__top__block__item"}>
<span className={"footer__top__block__link"}>
<strong>
Atendimento Ao <br /> Consumidor
</strong>
</span>
</li>
<li className={"footer__top__block__item"}>
<a
href="http://wa.me/(11)4159 9504"
target="_blank"
rel="noreferrer"
className={"footer__top__block__link"}
>
(11) 4159 9504
</a>
</li>
<li className={"footer__top__block__item"}>
<span className={"footer__top__block__link"}>
<strong>Atendimento Online</strong>
</span>
</li>
<li className={"footer__top__block__item"}>
<a
href="http://wa.me/(11)99433-8825"
target="_blank"
rel="noreferrer"
className={"footer__top__block__link"}
>
(11) 99433-8825
</a>
</li>
</ul>
</Accordion.Content>
</div>
</Accordion>
</AccordionProvider>
<div className={"footer__top__block-social"}>
<ul className={"footer__top__block-social__social-medias"}>
<li className={"footer__top__block-social__social-medias__logo"}>
<a
href="https://www.facebook.com/digitalm3"
target="_blank"
rel="noreferrer"
>
<img src={facebook} alt="Logo Facebook" />
</a>
</li>
<li className={"footer__top__block-social__social-medias__logo"}>
<a
href="https://www.instagram.com/m3.ecommerce/"
target="_blank"
rel="noreferrer"
>
<img src={instagram} alt="Logo instagram" />
</a>
</li>
<li className={"footer__top__block-social__social-medias__logo"}>
<a href="https://twitter.com/home" target="_blank" rel="noreferrer">
<img src={twitter} alt="Logo twitter" />
</a>
</li>
<li className={"footer__top__block-social__social-medias__logo"}>
<a
href="https://www.youtube.com/@m3e-commerce796"
target="_blank"
rel="noreferrer"
>
<img src={youtube} alt="Logo youtube" />
</a>
</li>
<li className={"footer__top__block-social__social-medias__logo"}>
<a
href="https://www.linkedin.com/company/m3ecommerce/"
target="_blank"
rel="noreferrer"
>
<img src={linkedin} alt="Logo linkedin" />
</a>
</li>
</ul>
<span className={"footer__top__block-social__social-medias__site"}>
www.loremipsum.com
</span>
</div>
</div>
</section>
);
};
export { FooterTop };

2
src/pages/Home.tsx
View File

@ -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 (