FilipeQuintanilha/desafio-react-e-typescript-Filipe-Quintanilha
1
0
Fork 0
forked from M3-Academy/desafio-react-e-typescript
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(footer): Adiciona footer mobile

Browse Source
This commit is contained in:
Filipe Quintanilha Evangelista 2022-12-29 14:46:49 -03:00
parent e7b690eac5
commit 84d40f6490
7 changed files with 159 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/assets/svgs/more.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

13
src/components/CustomForm.tsx
View File

@ -7,8 +7,12 @@ import styles from "../styles/main.module.scss";
const initialValues = {
name: "",
};
interface ICampoProps {
place: string;
button: string;
}
const CustomForm = () => {
const CustomForm = ({ place, button }: ICampoProps) => {
const handleFormikSubmit = () => {};
return (
@ -18,9 +22,12 @@ const CustomForm = () => {
<Field
className={styles["campo-busca__input"]}
name="name"
placeholder="Buscar..."
placeholder={place}
/>
<img className={styles["campo-busca__img"]} src={lupa} alt="" />
<button className={styles["campo-busca__img"]}>
{button}
<img src={lupa} alt="" />
</button>
</div>
</Form>
</Formik>

2
src/components/HeaderTop.tsx
View File

@ -28,7 +28,7 @@ const HeaderTop = () => {
alt="logo"
/>
</a>
<CustomForm />
<CustomForm place="Buscar..." button="" />
<div className={styles["header-wrapper__top-carrinho"]}>
<a href="/">ENTRAR</a>
<img src={cart} alt="" />

36
src/components/ListaFooter.tsx
View File

@ -1,5 +1,6 @@
import React from "react";
import React, { useState } from "react";
import styles from "../styles/main.module.scss";
import more from "../assets/svgs/more.svg";
interface IlistProps {
title: string;
@ -10,16 +11,31 @@ interface IlistProps {
}
const ListaFooter = ({ title, text1, text2, text3, text4 }: IlistProps) => {
const [isOpened, setIsOpened] = useState(false);
return (
<ul className={styles["list-wrapper"]}>
<li className={styles["list-wrapper__title"]}>{title}</li>
<li className={styles["list-wrapper__text"]}>{text1}</li>
<li className={styles["list-wrapper__text"]}>{text2}</li>
<li className={styles["list-wrapper__text"]}>{text3}</li>
<li className={styles["list-wrapper__text"]}>
<a href="/">{text4}</a>
</li>
</ul>
<div className={styles["footer-wrapper__top-items"]}>
<div className={styles["list-wrapper"]}>
<h2 className={styles["list-wrapper__title"]}>{title}</h2>
<ul
className={`${styles["list-wrapper__list"]} ${
styles[`${isOpened && "aberto"}`]
}`}
>
<li className={styles["list-wrapper__text"]}>{text1}</li>
<li className={styles["list-wrapper__text"]}>{text2}</li>
<li className={styles["list-wrapper__text"]}>{text3}</li>
<li className={styles["list-wrapper__text"]}>
<a href="/">{text4}</a>
</li>
</ul>
</div>
<button
className={styles["mostra-mais"]}
onClick={() => setIsOpened(!isOpened)}
>
<img src={more} alt="mais" />
</button>
</div>
);
};

4
src/styles/common/global.scss
View File

@ -10,6 +10,10 @@ body {
margin: 0;
}
img {
display: block;
}
button {
cursor: pointer;
}

137
src/styles/partials/Footer.module.scss
View File

@ -6,34 +6,47 @@
position: relative;
border-top: 1px solid $black;
.list-wrapper {
list-style: none;
padding: 0;
margin: 0;
max-width: 154px;
&-items {
display: flex;
.list-wrapper {
&__list {
list-style: none;
padding: 0;
margin: 0;
max-width: 154px;
}
&:nth-child(3) {
li:nth-child(even) {
&:nth-child(3) {
li:nth-child(even) {
font-weight: 500;
}
}
&__title {
font-weight: 500;
font-size: 14px;
line-height: 16px;
text-transform: uppercase;
margin-bottom: 12px;
margin-top: 0;
}
&__text {
font-size: 12px;
line-height: 14px;
margin-bottom: 12px;
a {
color: $black3;
}
}
}
&__title {
font-weight: 500;
font-size: 14px;
line-height: 16px;
text-transform: uppercase;
margin-bottom: 12px;
}
&__text {
font-size: 12px;
line-height: 14px;
margin-bottom: 12px;
a {
color: $black3;
}
.mostra-mais {
display: none;
border: none;
background: transparent;
height: 12px;
}
}
@ -142,11 +155,87 @@
}
}
@media screen and (max-width: 1024px) {
.footer-wrapper {
&__top {
flex-direction: column;
padding: 24px 16px;
.list-wrapper {
&__list {
opacity: 0;
pointer-events: none;
height: 0;
max-width: 155px;
}
.aberto {
opacity: 1;
pointer-events: all;
height: 105px;
}
}
&-items {
justify-content: space-between;
margin-bottom: 12px;
.mostra-mais {
display: block;
}
}
.social-wrapper {
.sociail-link {
display: none;
}
}
}
.volta-pag {
bottom: -96px;
z-index: 1;
top: auto;
}
&__bottom {
justify-content: flex-start;
align-items: flex-start;
flex-direction: column;
padding: 58px 0 16px 16px;
position: relative;
&-text {
margin-bottom: 15px;
max-width: 354px;
}
&-central {
position: absolute;
top: 15px;
.payments {
justify-content: space-between;
img {
width: 9.4%;
}
}
.certificado {
img {
width: 82%;
}
}
}
}
}
}
@media screen and (min-width: 2500px) {
.footer-wrapper {
&__top {
.list-wrapper {
max-width: 309px;
&__list {
max-width: 309px;
}
&__title {
font-size: 28px;

2
src/styles/partials/Header.module.scss
View File

@ -47,6 +47,8 @@
top: 50%;
transform: translateY(-50%);
right: 16px;
border: none;
background: transparent;
}
}