Rafael_Sampaio_de_Oliveira/desafio-react-e-typescript-rafael-sampaio
1
0
Fork 0
forked from M3-Academy/desafio-react-e-typescript
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: adiciona menu accordion

Browse Source
This commit is contained in:
Rafael Sampaio de Oliveira 2023-01-04 15:32:08 -03:00
parent e0b7730cbc
commit f1154f48c4
4 changed files with 150 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/Footer/index.tsx
View File

@ -3,11 +3,15 @@ import { FooterBottom } from "../FooterBottom";
import { FooterTop } from "../FooterTop";
import { NewsLetter } from "../NewsLetter";
const Footer = () => {
interface FooterProps {
windowWidth: number;
}
const Footer = ({ windowWidth }: FooterProps) => {
return (
<footer>
<NewsLetter />
<FooterTop />
<FooterTop windowWidth={windowWidth} />
<FooterBottom />
</footer>
);

150
src/components/FooterTop/index.tsx
View File

@ -1,4 +1,4 @@
import React from "react";
import React, { useEffect, useState } from "react";
import styles from "./styles.module.scss";
import facebook from "../../assets/images/facebook.png";
import instagram from "../../assets/images/instagram.png";
@ -6,66 +6,110 @@ import twitter from "../../assets/images/twitter.png";
import youTube from "../../assets/images/youTube.png";
import linkedIn from "../../assets/images/linkedIn.png";
const FooterTop = () => {
interface FooterTopProps {
windowWidth: number;
}
interface AccordionProps extends FooterTopProps {
title: string;
content: string[];
}
const Accordion = ({ title, content, windowWidth }: AccordionProps) => {
const [isActive, setIsActive] = useState(false);
useEffect(() => {
if (windowWidth > 1024) {
setIsActive(true);
} else if (windowWidth <= 1024) {
setIsActive(false);
}
}, [windowWidth]);
return (
<div>
<div className={styles["menuLists-title"]}>
<h1>{title}</h1>
<button type="button" onClick={() => setIsActive(!isActive)}>
{isActive ? "-" : "+"}
</button>
</div>
{isActive && (
<ul>
{content.map((item) => (
<li key={item}>
<a href="#">{item}</a>
</li>
))}
</ul>
)}
</div>
);
};
const FooterTop = ({ windowWidth }: FooterTopProps) => {
const [isActive, setIsActive] = useState(false);
useEffect(() => {
if (windowWidth > 1024) {
setIsActive(true);
} else if (windowWidth <= 1024) {
setIsActive(false);
}
}, [windowWidth]);
const accordionData = [
{
title: "Institucional",
content: [
"Quem Somos",
"Política de Privacidade",
"Segurança",
"Seja um Revendedor",
],
},
{
title: "Dúvidas",
content: [
"Entrega",
"Pagamento",
"Trocas e Devoluções",
"Dúvidas Frequentes",
],
},
];
return (
<div className={styles["footerTop"]}>
<div className={styles["footerTop__content"]}>
<div className={styles["footerTop__menuList"]}>
<div>
<div className={styles["menuLists-title"]}>
<h1>Institucional</h1>
<button></button>
</div>
<ul>
<li>
<a href="#">Quem Somos</a>
</li>
<li>
<a href="#">Política de Privacidade</a>
</li>
<li>
<a href="#">Segurança</a>
</li>
<li>
<a href="#">Seja um Revendedor</a>
</li>
</ul>
</div>
<div>
<div className={styles["menuLists-title"]}>
<h1>Dúvidas</h1>
<button></button>
</div>
<ul>
<li>
<a href="#">Entrega</a>
</li>
<li>
<a href="#">Pagamento</a>
</li>
<li>
<a href="#">Troca e Devoluções</a>
</li>
<li>
<a href="#">Dúvidas Frquentes</a>
</li>
</ul>
</div>
{accordionData.map(({ title, content }) => (
<Accordion
key={title}
title={title}
content={content}
windowWidth={windowWidth}
/>
))}
<div>
<div className={styles["menuLists-title"]}>
<h1>Fale Conosco</h1>
<button></button>
<button type="button" onClick={() => setIsActive(!isActive)}>
{isActive ? "-" : "+"}
</button>
</div>
<ul>
<h2>Atendimento Ao Consumidor</h2>
<li>
<p>&#40;11&#41; 4159 9504</p>
</li>
<h2>Atendimento Online</h2>
<li>
<p>&#40;11&#41; 99433-8825</p>
</li>
</ul>
{isActive && (
<ul>
<h2>Atendimento Ao Consumidor</h2>
<li>
<p>&#40;11&#41; 4159 9504</p>
</li>
<h2>Atendimento Online</h2>
<li>
<p>&#40;11&#41; 99433-8825</p>
</li>
</ul>
)}
</div>
</div>
<div className={styles["footerTop__socialMedia"]}>

46
src/components/FooterTop/styles.module.scss
View File

@ -4,7 +4,7 @@
border-width: 0px 0px 1px 1px;
border-style: solid;
border-color: var(--black-500);
height: 239px;
height: auto;
padding: 50px 0;
&__content {
@ -21,8 +21,18 @@
margin-right: 50px;
.menuLists-title {
display: flex;
align-items: center;
justify-content: space-between;
height: 14px;
margin-bottom: 12px;
button {
display: none;
border: none;
background: transparent;
font-size: 18px;
}
}
h1 {
@ -83,6 +93,40 @@
}
}
@media (max-width: 1024px) {
padding: 24px 16px 30px 16px;
&__content {
width: 100%;
flex-direction: column;
}
&__menuList {
flex-direction: column;
margin: 0;
width: 100%;
gap: 12px;
.menuLists-title {
button {
display: block;
}
}
h1 {
text-transform: none;
}
}
&__socialMedia {
height: 35px;
.socialMeida-site {
display: none;
}
}
}
@media (min-width: 2500px) {
height: 297px;

4
src/pages/Institutional/index.tsx
View File

@ -6,7 +6,7 @@ import { MenuMobileModal } from "../../components/MunuMobileModal";
const Institutional = () => {
const [menuMobileModal, setMenuMobileModal] = useState(false);
const [windowWidth, setWindowWidth] = useState(0);
const [windowWidth, setWindowWidth] = useState(window.innerWidth);
useEffect(() => {
window.addEventListener("resize", windowResize);
@ -27,7 +27,7 @@ const Institutional = () => {
/>
<Header handleOpenMenuMobileModal={() => setMenuMobileModal(true)} />
<InstitutionalMain />
<Footer />
<Footer windowWidth={windowWidth} />
</>
);
};