anacarolinaduartecavalcante/desafio-react-e-typescript-ana-carolina-duarte-cavalcante
1
0
Fork 0
forked from M3-Academy/desafio-react-e-typescript
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor(footer): substituição do nome BackToTopButton por SubListContent

Browse Source
This commit is contained in:
Ana Carolina Duarte Cavalcante 2023-01-12 16:08:17 -03:00
parent fda63638d6
commit b2b7f25ae8
3 changed files with 81 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -5,59 +5,105 @@ import TwitterIcon from "./assets/icons/TwitterIcon.svg";
import YoutubeIcon from "./assets/icons/YoutubeIcon.svg";
import LinkedInIcon from "./assets/icons/LinkedInIcon.svg";
import PlusIcon from "./assets/icons/PlusIcon.svg";
import { BackToTopButton } from "./BackToTopButton";
import { SubListContent } from "./SubListContent";
const FooterTop = () => {
return (
<div>
<ul className={styles["Menu__List"]}>
<ul className={styles["Menu__List__Group"]}>
<input type="checkbox" id="FirstOption"/>
<input type="checkbox" id="FirstOption" />
<label htmlFor="FirstOption">
<img src={PlusIcon} alt="ícone de abrir menu"/>
<img src={PlusIcon} alt="ícone de abrir menu" />
</label>
<li className={styles["Menu__List__Group__Title"]}>Institucional</li>
<li className={styles["Menu__List__Group__SubTitle"]}><a href="/">Quem Somos</a></li>
<li className={styles["Menu__List__Group__SubTitle"]}><a href="/">Política de Privacidade</a></li>
<li className={styles["Menu__List__Group__SubTitle"]}><a href="/">Segurança</a></li>
<li className={styles["Menu__List__Group__SubTitle"]}><a href="/">Seja um Revendedor</a></li>
<li className={styles["Menu__List__Group__SubTitle"]}>
<a href="/">Quem Somos</a>
</li>
<li className={styles["Menu__List__Group__SubTitle"]}>
<a href="/">Política de Privacidade</a>
</li>
<li className={styles["Menu__List__Group__SubTitle"]}>
<a href="/">Segurança</a>
</li>
<li className={styles["Menu__List__Group__SubTitle"]}>
<a href="/">Seja um Revendedor</a>
</li>
</ul>
<ul className={styles["Menu__List__Group"]}>
<input type="checkbox" id="SecondOption"/>
<input type="checkbox" id="SecondOption" />
<label htmlFor="SecondOption">
<img src={PlusIcon} alt="ícone de abrir menu"/>
<img src={PlusIcon} alt="ícone de abrir menu" />
</label>
<li className={styles["Menu__List__Group__Title"]}>Dúvidas</li>
<li className={styles["Menu__List__Group__SubTitle"]}><a href="/">Pagamento</a></li>
<li className={styles["Menu__List__Group__SubTitle"]}><a href="/">Trocas e Devoluções</a></li>
<li className={styles["Menu__List__Group__SubTitle"]}><a href="/">Segurança</a></li>
<li className={styles["Menu__List__Group__SubTitle"]}><a href="/">Dúvidas Frequentes</a></li>
<li className={styles["Menu__List__Group__SubTitle"]}>
<a href="/">Pagamento</a>
</li>
<li className={styles["Menu__List__Group__SubTitle"]}>
<a href="/">Trocas e Devoluções</a>
</li>
<li className={styles["Menu__List__Group__SubTitle"]}>
<a href="/">Segurança</a>
</li>
<li className={styles["Menu__List__Group__SubTitle"]}>
<a href="/">Dúvidas Frequentes</a>
</li>
</ul>
<ul className={styles["Menu__List__Group"]}>
<input type="checkbox" id="ThirdOption"/>
<input type="checkbox" id="ThirdOption" />
<label htmlFor="ThirdOption">
<img src={PlusIcon} alt="ícone de abrir menu"/>
<img src={PlusIcon} alt="ícone de abrir menu" />
</label>
<li className={styles["Menu__List__Group__Title"]}>Fale Conosco</li>
<li className={styles["Menu__List__Group__SubTitle"]}><a href="/">Atendimento ao Consumidor</a></li>
<li className={styles["Menu__List__Group__SubTitle"]}><a href="/">(11) 4159 9504</a></li>
<li className={styles["Menu__List__Group__SubTitle"]}><a href="/">Atendimento Online</a></li>
<li className={styles["Menu__List__Group__SubTitle"]}><a href="/">(11) 99433-8825</a></li>
<li className={styles["Menu__List__Group__SubTitle"]}>
<a href="/">Atendimento ao Consumidor</a>
</li>
<li className={styles["Menu__List__Group__SubTitle"]}>
<a href="/">(11) 4159 9504</a>
</li>
<li className={styles["Menu__List__Group__SubTitle"]}>
<a href="/">Atendimento Online</a>
</li>
<li className={styles["Menu__List__Group__SubTitle"]}>
<a href="/">(11) 99433-8825</a>
</li>
</ul>
</ul>
<ul className={styles["Redes__Sociais"]}>
<ul className={styles["Redes__Sociais__Lista"]}>
<ul className={styles["Redes__Sociais__Lista__SocialMedia"]}>
<li><a href="/"><img src={FacebookIcon} alt="ícone do Facebook"/></a></li>
<li><a href="/"><img src={InstagramIcon} alt="ícone do Instagram"/></a></li>
<li><a href="/"><img src={TwitterIcon} alt="ícone do Twitter"/></a></li>
<li><a href="/"><img src={YoutubeIcon} alt="ícone do Youtube"/></a></li>
<li><a href="/"><img src={LinkedInIcon} alt="ícone do LinkedIn"/></a></li>
<ul className={styles["Redes__Sociais__List"]}>
<ul className={styles["Redes__Sociais__List__SocialMedia"]}>
<li>
<a href="/">
<img src={FacebookIcon} alt="ícone do Facebook" />
</a>
</li>
<li>
<a href="/">
<img src={InstagramIcon} alt="ícone do Instagram" />
</a>
</li>
<li>
<a href="/">
<img src={TwitterIcon} alt="ícone do Twitter" />
</a>
</li>
<li>
<a href="/">
<img src={YoutubeIcon} alt="ícone do Youtube" />
</a>
</li>
<li>
<a href="/">
<img src={LinkedInIcon} alt="ícone do LinkedIn" />
</a>
</li>
</ul>
<li className={styles["Redes__Sociais__Lista__Site"]}><a href="/">www.loremipsum.com</a></li>
<li className={styles["Redes__Sociais__List__Site"]}>
<a href="/">www.loremipsum.com</a>
</li>
</ul>
<ul className={styles["Redes__Sociais__SubLista"]}>
<BackToTopButton/>
<ul className={styles["Redes__Sociais__SubList"]}>
<SubListContent />
</ul>
</ul>
</div>

5
src/components/Footer/BackToTopButton.tsx → src/components/Footer/SubListContent.tsx
View File

@ -2,7 +2,7 @@ import { useEffect, useState } from "react";
import ArrowIcon from "./assets/icons/ArrowIcon.svg";
import WhatsAppIcon from "./assets/icons/WhatsAppIcon.svg";
const BackToTopButton = () => {
const SubListContent = () => {
const [backToToButton, setBackToToButton] = useState(false);
useEffect(() => {
window.addEventListener("scroll", () => {
@ -17,7 +17,6 @@ const BackToTopButton = () => {
window.scrollTo({
top: 0,
behavior: "smooth",
});
};
return (
@ -50,4 +49,4 @@ const BackToTopButton = () => {
);
};
export { BackToTopButton };
export { SubListContent };

8
src/components/Footer/styles/Footer.module.scss
View File

@ -174,7 +174,7 @@ footer {
}
& img {
height: 20.14px;
@media (min-width: 2500px) {
@media (min-width: 2500px) {
height: 40.25px;
}
@media (max-width: 376px) {
@ -515,7 +515,7 @@ footer {
width: 100%;
column-gap: 0px;
}
&__Lista {
&__List {
position: relative;
list-style: none;
padding-left: 0;
@ -568,7 +568,7 @@ footer {
}
}
}
&__SubLista {
&__SubList {
padding-left: 0;
position: fixed;
right: 16px;
@ -633,7 +633,7 @@ footer {
margin: 0;
padding: 0;
@media (min-width: 2500px) {
height: 139.49px;
height: 139.49px;
}
@media (max-width: 1025px) {
height: 180.49px;