NicollyVieira/desafio-react-e-typescript-nicolly-vieira
1
0
Fork 0
forked from M3-Academy/desafio-react-e-typescript
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(Footer): Cria o accorddion para o footer abaixo de 1025px

Browse Source
This commit is contained in:
Nicolly Vieira Santos Costa 2023-01-07 13:15:13 -03:00
parent e5645ba952
commit d4bac5f1e4
9 changed files with 172 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
desafio-react-typescript/src/assets/svgs/plus.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="8" height="9" viewBox="0 0 8 9" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.625 3.32031H7.79688V4.6875H4.625V8.28125H3.17188V4.6875H0V3.32031H3.17188V0H4.625V3.32031Z" fill="#303030"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 220 B

3
desafio-react-typescript/src/components/Footer/components/FooterTop.tsx/FooterTop.module.scss
View File

@ -19,6 +19,8 @@
@include mq($lg, max) {
flex-direction: column;
width: 100%;
gap: 12px;
}
@include mq($xl, min) {
@ -34,3 +36,4 @@
}
}
}

13
desafio-react-typescript/src/components/Footer/components/FooterTop.tsx/FooterTop.tsx
View File

@ -1,24 +1,25 @@
import React from "react";
import MenuListInfo from "./components/MenuListInfo";
import MenuListLink from "./components/MenuListLink";
import MenuListInfo from "./components/InfoFaleConosco";
import RedesSociais from "./components/RedesSociais";
import styles from "./FooterTop.module.scss";
import InfoLinks from "./components/InfoLinks";
const FooterTop = () => {
return (
<div className={styles["footerTop"]}>
<div className={styles["footerTop__menu-link-wrapper"]}>
<MenuListLink
title="institucional"
<InfoLinks
title="Institucional"
list={[
"Quem somos",
"Política de Privacidade",
"Politíca de Privacidade",
"Segurança",
"Seja um Revendedor",
]}
/>
<MenuListLink
<InfoLinks
title="Dúvidas"
list={[
"Entrega",

20
desafio-react-typescript/src/components/Footer/components/FooterTop.tsx/components/MenuListInfo.module.scss → desafio-react-typescript/src/components/Footer/components/FooterTop.tsx/components/InfoFaleConosco.module.scss
View File

@ -3,6 +3,26 @@
.menu-list {
width: 21.923623%;
@include mq($lg, max) {
width: 100%;
}
&__unselect{
display: none;
}
&__title-wrapper {
@include display(flex, row, center, space-between);
img {
display: none;
@include mq($lg, max) {
display: block;
}
}
}
&__title {
@include fontStyle(500, 14px, 16px, $primary-200);
text-transform: uppercase;

56
desafio-react-typescript/src/components/Footer/components/FooterTop.tsx/components/InfoFaleConosco.tsx Normal file
View File

@ -0,0 +1,56 @@
import React, { useState, useEffect } from "react";
import styles from "./InfoFaleConosco.module.scss";
import plus from "../../../../../assets/svgs/plus.svg";
const InfoFaleConosco = () => {
const verificarTamanhoDaWindow = () => {
if (window.innerWidth <= 1024) {
return false;
} else {
return true;
}
};
const [isActive, setIsActive] = useState(verificarTamanhoDaWindow());
useEffect(() => {
window.addEventListener("resize", () => {
if (window.innerWidth <= 1024) {
setIsActive(false);
} else {
setIsActive(true);
}
});
});
return (
<section className={styles["menu-list"]}>
<div className={styles["menu-list__title-wrapper"]}>
<h4 className={styles["menu-list__title"]}>Fale Conosco</h4>
<img
src={plus}
alt="Abrir/Fechar"
onClick={() => setIsActive(!isActive)}
/>
</div>
{isActive && (
<ul
className={
isActive
? `${styles["menu-list__container"]}`
: `${styles["menu-list__unselect"]}`
}
>
<li className={styles["menu-list__item"]}>
Atendimento Ao Consumidor
</li>
<li className={styles["menu-list__telephone"]}>(11) 4159 9504</li>
<li className={styles["menu-list__item"]}>Atendimento Online</li>
<li className={styles["menu-list__telephone"]}>(11) 99433-8825</li>
</ul>
)}
</section>
);
};
export default InfoFaleConosco;

21
desafio-react-typescript/src/components/Footer/components/FooterTop.tsx/components/MenuListLink.module.scss → desafio-react-typescript/src/components/Footer/components/FooterTop.tsx/components/InfoLinks.module.scss
View File

@ -2,6 +2,27 @@
.menu-list {
width: 21.923623%;
@include mq($lg, max) {
width: 100%;
}
&__unselect{
display: none;
}
&__title-wrapper {
@include display(flex, row, center, space-between);
img {
display: none;
@include mq($lg, max) {
display: block;
}
}
}
&__title {
@include fontStyle(500, 14px, 16px, $primary-200);
text-transform: uppercase;

62
desafio-react-typescript/src/components/Footer/components/FooterTop.tsx/components/InfoLinks.tsx Normal file
View File

@ -0,0 +1,62 @@
import React, { useState, useEffect } from "react";
import styles from "./InfoLinks.module.scss";
import plus from "../../../../../assets/svgs/plus.svg";
interface IInfoLinks {
title: string;
list: Array<string>;
}
const InfoLinks = ({ title, list }: IInfoLinks) => {
const verificarTamanhoDaWindow = () => {
if (window.innerWidth <= 1024) {
return false;
} else {
return true;
}
};
const [isActive, setIsActive] = useState(verificarTamanhoDaWindow());
useEffect(() => {
window.addEventListener("resize", () => {
if (window.innerWidth <= 1024) {
setIsActive(false);
} else {
setIsActive(true);
}
});
});
return (
<section className={styles["menu-list"]}>
<div className={styles["menu-list__title-wrapper"]}>
<h4 className={styles["menu-list__title"]}>{title}</h4>
<img
src={plus}
alt="Abrir/Fechar"
onClick={() => setIsActive(!isActive)}
/>
</div>
{isActive && <ul
className={styles["menu-list__container"]}
>
{list.map((item, index) => {
return (
<li key={index}>
<a className={styles["menu-list__item"]} href="/">
{item}
</a>
</li>
);
})}
</ul>}
</section>
);
};
export default InfoLinks;

22
desafio-react-typescript/src/components/Footer/components/FooterTop.tsx/components/MenuListInfo.tsx
View File

@ -1,22 +0,0 @@
import React from "react";
import styles from "./MenuListInfo.module.scss";
const MenuListInfo = () => {
return (
<div className={styles["menu-list"]}>
<h4 className={styles["menu-list__title"]}>Fale Conosco</h4>
<ul className={styles["menu-list__container"]}>
<li className={styles["menu-list__item"]}>Atendimento Ao Consumidor</li>
<li className={styles["menu-list__telephone"]}>(11) 4159 9504</li>
<li className={styles["menu-list__item"]}>Atendimento Online</li>
<li className={styles["menu-list__telephone"]}>(11) 99433-8825</li>
</ul>
</div>
);
};
export default MenuListInfo;

25
desafio-react-typescript/src/components/Footer/components/FooterTop.tsx/components/MenuListLink.tsx
View File

@ -1,25 +0,0 @@
import React from "react";
import styles from "./MenuListLink.module.scss";
interface MenuListLinkProps {
title: string;
list: Array<string>;
}
const MenuListLink = ({ title, list }: MenuListLinkProps) => {
return (
<div className={styles["menu-list"]}>
<h4 className={styles["menu-list__title"]}>{title}</h4>
<ul className={styles["menu-list__container"]}>
{list.map((item, index) => (
<li key={index}>
<a className={styles["menu-list__item"]} href="/">
{item}
</a>
</li>
))}
</ul>
</div>
);
};
export default MenuListLink;