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

feature/challenge #1

Merged
BernardoWaldhelm merged 38 commits from feature/challenge into main 2023-01-15 15:25:18 +00:00
Conversation 0 Commits 38 Files Changed 83 +99 -45
2 changed files with 99 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 594211063c - Show all commits

30
src/components/Footer/FooterTop/FooterTop.module.scss → src/components/Footer/FooterTop/FooterTop.scss
View File

@ -32,6 +32,8 @@
@media #{$mq-tablet}, #{$mq-mobile} {
margin: 0;
width: 100%;
align-items: flex-start;
}
&__title {
@ -49,7 +51,35 @@
@media #{$mq-desktop}, #{$mq-tablet}, #{$mq-mobile} {
font-size: 14px;
line-height: 16px;
}
@media #{$mq-tablet}, #{$mq-mobile} {
display: flex;
align-items: center;
justify-content: space-between;
&::after {
content: '+';
font-family: $font-family;
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 16px;
text-transform: uppercase;
color: $color-black-500;
}
}
&.opened {
&::after {
content: '-';
}
}
&.opened ~ .footer__top__block__item-list{
display: flex;
margin-bottom: 12px;
}
}

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

@ -1,4 +1,6 @@
import styles from './FooterTop.module.scss'
import { useState } from 'react';
import './FooterTop.scss'
import facebook from '../../../assets/imgs/logo-facebook.png';
import instagram from '../../../assets/imgs/logo-instagram.png';
@ -7,118 +9,140 @@ import youtube from '../../../assets/imgs/logo-youtube.png';
import linkedin from '../../../assets/imgs/logo-linkedin.png';
const FooterTop = () => {
return (
<section className={styles['footer__top']}>
<div className={styles['footer__top__wrapper']}>
<div className={styles['footer__top__block']}>
<h4 className={styles['footer__top__block__title']}> INSTITUCIONAL </h4>
<ul className={styles['footer__top__block__item-list']}>
<li className={styles['footer__top__block__item']}>
<a href="/" className={styles['footer__top__block__link']}>
const [ulIsVisible, setUlIsVisible] = useState(false);
const handleClick = () => {
const titles = document.querySelectorAll('.footer__top__block__title');
for (let index = 0; index < titles.length; index++) {
const element = titles[index];
element.addEventListener('click', () => {
if (ulIsVisible) {
setUlIsVisible(false)
element.classList.remove('opened');
} else {
setUlIsVisible(true)
element.classList.add('opened')
}
})
}
}
return (
<section className={'footer__top'}>
<div className={'footer__top__wrapper'}>
<div className={'footer__top__block'}>
<h4 className={`footer__top__block__title`} onClick={handleClick}> INSTITUCIONAL </h4>
<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={styles['footer__top__block__item']}>
<a href="/" className={styles['footer__top__block__link']}>
<li className={'footer__top__block__item'}>
<a href="/" className={'footer__top__block__link'}>
Política de Privacidade
</a>
</li>
<li className={styles['footer__top__block__item']}>
<a href="/" className={styles['footer__top__block__link']}>
<li className={'footer__top__block__item'}>
<a href="/" className={'footer__top__block__link'}>
Segurança
</a>
</li>
<li className={styles['footer__top__block__item']}>
<a href="/" className={styles['footer__top__block__link']}>
<li className={'footer__top__block__item'}>
<a href="/" className={'footer__top__block__link'}>
Seja um Revendedor
</a>
</li>
</ul>
</div>
<div className={styles['footer__top__block']}>
<h4 className={styles['footer__top__block__title']}> DÚVIDAS </h4>
<div className={'footer__top__block'}>
<h4 className={`footer__top__block__title`} onClick={handleClick}> DÚVIDAS </h4>
<ul className={styles['footer__top__block__item-list']}>
<li className={styles['footer__top__block__item']}>
<a href="/" className={styles['footer__top__block__link']}>
<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={styles['footer__top__block__item']}>
<a href="/" className={styles['footer__top__block__link']}>
<li className={'footer__top__block__item'}>
<a href="/" className={'footer__top__block__link'}>
Pagamento
</a>
</li>
<li className={styles['footer__top__block__item']}>
<a href="/" className={styles['footer__top__block__link']}>
<li className={'footer__top__block__item'}>
<a href="/" className={'footer__top__block__link'}>
Trocas e Devoluções
</a>
</li>
<li className={styles['footer__top__block__item']}>
<a href="/" className={styles['footer__top__block__link']}>
<li className={'footer__top__block__item'}>
<a href="/" className={'footer__top__block__link'}>
Dúvidas Frequentes
</a>
</li>
</ul>
</div>
<div className={styles['footer__top__block']}>
<h4 className={styles['footer__top__block__title']}> Fale Conosco </h4>
<div className={'footer__top__block'}>
<h4 className={`footer__top__block__title`} onClick={handleClick}> Fale Conosco </h4>
<ul className={styles['footer__top__block__item-list']}>
<li className={styles['footer__top__block__item']}>
<a href="/" className={styles['footer__top__block__link']}>
<ul className={'footer__top__block__item-list'}>
<li className={'footer__top__block__item'}>
<a href="/" className={'footer__top__block__link'}>
<strong>Atendimento Ao <br/> Consumidor</strong>
</a>
</li>
<li className={styles['footer__top__block__item']}>
<a href="/" className={styles['footer__top__block__link']}>
<li className={'footer__top__block__item'}>
<a href="/" className={'footer__top__block__link'}>
(11) 4159 9504
</a>
</li>
<li className={styles['footer__top__block__item']}>
<a href="/" className={styles['footer__top__block__link']}>
<li className={'footer__top__block__item'}>
<a href="/" className={'footer__top__block__link'}>
<strong>Atendimento Online</strong>
</a>
</li>
<li className={styles['footer__top__block__item']}>
<a href="/" className={styles['footer__top__block__link']}>
<li className={'footer__top__block__item'}>
<a href="/" className={'footer__top__block__link'}>
(11) 99433-8825
</a>
</li>
</ul>
</div>
<div className={styles['footer__top__block-social']}>
<ul className={styles['footer__top__block-social__social-medias']}>
<li className={styles['footer__top__block-social__social-medias__logo']}>
<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="/" target='_blank' rel='noreferrer' >
<img src={facebook} alt="Logo Facebook" />
</a>
</li>
<li className={styles['footer__top__block-social__social-medias__logo']}>
<li className={'footer__top__block-social__social-medias__logo'}>
<a href="/" target='_blank' rel='noreferrer' >
<img src={instagram} alt="Logo instagram" />
</a>
</li>
<li className={styles['footer__top__block-social__social-medias__logo']}>
<li className={'footer__top__block-social__social-medias__logo'}>
<a href="/" target='_blank' rel='noreferrer' >
<img src={twitter} alt="Logo twitter" />
</a>
</li>
<li className={styles['footer__top__block-social__social-medias__logo']}>
<li className={'footer__top__block-social__social-medias__logo'}>
<a href="/" target='_blank' rel='noreferrer' >
<img src={youtube} alt="Logo youtube" />
</a>
</li>
<li className={styles['footer__top__block-social__social-medias__logo']}>
<li className={'footer__top__block-social__social-medias__logo'}>
<a href="/" target='_blank' rel='noreferrer' >
<img src={linkedin} alt="Logo linkedin" />
</a>
</li>
</ul>
<span className={styles['footer__top__block-social__social-medias__site']}>www.loremipsum.com</span>
<span className={'footer__top__block-social__social-medias__site'}>www.loremipsum.com</span>
</div>
</div>