WilliamSimao/desafio-react-e-typescript-WilliamSimao
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(Footer): Estiliza FooterMobile

Browse Source
This commit is contained in:
William Simão Cavalcante 2023-01-10 14:59:30 -03:00
parent aecc26b587
commit 829b86c3c6
16 changed files with 243 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
react-ts/src/Pages/Home/Home.tsx
View File

@ -3,6 +3,7 @@ import HeaderMobile from '../../components/HeaderMobile/HeaderMobile'
import BreadCrumb from '../../components/BreadCrumb/BreadCrumb'
import NewsLetter from '../../components/NewsLetter/NewsLetter'
import FooterLinks from '../../components/FooterLinks/FooterLinks'
import FooterLinksMobile from '../../components/FooterLinksMobile/FooterLinksMobile'
import Footer from '../../components/Footer/Footer'
const Home = () => {
@ -13,6 +14,7 @@ const Home = () => {
<BreadCrumb/>
<NewsLetter/>
<FooterLinks/>
<FooterLinksMobile/>
<Footer/>
</>
)

6
react-ts/src/components/BreadCrumb/BreadCrumb.module.scss
View File

@ -17,6 +17,12 @@
}
}
@media only screen and (max-width: 1280px) {
.container-breadCrumb {
padding: 29px 16px 0;
}
}
@media only screen and (min-width: 2500px) {
.container-breadCrumb {
&__house {

2
react-ts/src/components/Footer/Footer.tsx
View File

@ -1,7 +1,7 @@
import styles from './Footer.module.scss';
import ScrollTop from '../ScrollTop/ScrollTop';
import Whatsap from '../Whatsap/WhatsApp';
import Whatsap from '../Whatsapp/WhatsApp';
import FooterCardsMobile from './FooterCardsMobile';
import MasterCard from '../../assets/images/MasterCard.svg';

35
react-ts/src/components/FooterLinks/FooterLinks.module.scss
View File

@ -44,23 +44,6 @@
}
}
}
&__social {
display: flex;
flex-direction: column;
row-gap: 12px;
&__picture {
display: flex;
column-gap: 10px;
}
a {
font-family: $font-family;
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 16px;
color: $color-black2;
}
}
&__contact {
position: absolute;
right: 0;
@ -68,6 +51,12 @@
}
}
@media only screen and (max-width: 1024px) {
.container {
display: none;
}
}
@media only screen and (min-width: 2500px) {
.container {
&__wrapper-links {
@ -91,17 +80,5 @@
}
}
}
&__social {
&__picture {
img {
width: 70px;
height: 70px;
}
}
a {
font-size: 28px;
line-height: 33px;
}
}
}
}

22
react-ts/src/components/FooterLinks/FooterLinks.tsx
View File

@ -1,13 +1,8 @@
import styles from './FooterLinks.module.scss';
import SocialMedia from '../SocialMedia/SocialMedia';
import ScrollTop from '../ScrollTop/ScrollTop';
import Whatsap from '../Whatsap/WhatsApp';
import Facebook from '../../assets/images/Facebook.svg';
import Instagram from '../../assets/images/Instagram.svg';
import Twitter from '../../assets/images/Twitter.svg';
import YouTube from '../../assets/images/YouTube.svg';
import Linkedin from '../../assets/images/Linkedin.svg';
import Whatsap from '../Whatsapp/WhatsApp';
const FooterLinks = () => {
return (
@ -71,18 +66,7 @@ const FooterLinks = () => {
</li>
</ul>
</div>
<div className={styles['container__social']}>
<picture className={styles['container__social__picture']}>
<img src={Facebook} alt="Facebook" />
<img src={Instagram} alt="Instagram" />
<img src={Twitter} alt="Twitter" />
<img src={YouTube} alt="YouTube" />
<img src={Linkedin} alt="Linkedin" />
</picture>
<a href="/">
www.loremipsum.com
</a>
</div>
<SocialMedia/>
<div className={styles['container__contact']}>
<Whatsap/>
<ScrollTop/>

28
react-ts/src/components/FooterLinksMobile/FooterLinksAccordion.module.scss Normal file
View File

@ -0,0 +1,28 @@
@import '../../styles/utils/Variables.scss';
.container {
&__title {
display: flex;
align-items: center;
justify-content: space-between;
h1 {
font-family: $font-family;
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 16px;
color: $color-black2;
}
span {
font-family: $font-family;
font-weight: 500;
color: $color-black2;
}
}
}
@media only screen and (min-width: 1025px) {
.container {
display: none;
}
}

24
react-ts/src/components/FooterLinksMobile/FooterLinksAccordion.tsx Normal file
View File

@ -0,0 +1,24 @@
import { useState } from "react";
import styles from './FooterLinksAccordion.module.scss';
interface Title {
title: any,
content: any,
}
const FooterLinksAccordion = ({ title, content }: Title) => {
const [isActive, setIsActive] = useState(false);
return (
<div className={styles['container']}>
<div className={styles['container__title']} onClick={() => setIsActive(!isActive)}>
<h1>{title}</h1>
{isActive ? <span>-</span> : <span>+</span>}
</div>
{isActive && <>{content}</>}
</div>
);
};
export default FooterLinksAccordion;

34
react-ts/src/components/FooterLinksMobile/FooterLinksMobile.module.scss Normal file
View File

@ -0,0 +1,34 @@
@import '../../styles/utils/Variables.scss';
.container {
padding: 24px 16px;
display: flex;
flex-direction: column;
row-gap: 12px;
border-top: 1px solid $color-black1;
ul {
display: flex;
flex-direction: column;
row-gap: 5px;
b {
font-family: $font-family;
font-style: normal;
font-weight: 500;
font-size: 12px;
line-height: 14px;
text-transform: capitalize;
color: $color-black2;
}
li {
a {
font-family: $font-family;
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 14px;
text-transform: capitalize;
color: $color-black2;
}
}
}
}

71
react-ts/src/components/FooterLinksMobile/FooterLinksMobile.tsx Normal file
View File

@ -0,0 +1,71 @@
import styles from './FooterLinksMobile.module.scss';
import FooterLinksAccordion from './FooterLinksAccordion';
import SocialMedia from '../SocialMedia/SocialMedia';
const FooterLinksMobile = () => {
const text = [
{
title: 'Institucional',
subTitle: <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>
},
{
title: 'Dúvidas',
subTitle: <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 Frequentes</a>
</li>
</ul>
},
{
title: 'Fale Conosco',
subTitle: <ul>
<b>Atendimento Ao Consumidor</b>
<li>
<a href="(11) 4159 9504">(11) 4159 9504</a>
</li>
<b>Atendmento Online</b>
<li>
<a href="(11) 99433-8825">(11) 99433-8825</a>
</li>
</ul>
},
]
return (
<>
<div className={styles['container']}>
{text.map(({title, subTitle}) => (
<FooterLinksAccordion title={title} content={subTitle}/>
))}
</div>
</>
)
}
export default FooterLinksMobile;

2
react-ts/src/components/MenuMobile/ComponentMobile.tsx
View File

@ -1,11 +1,9 @@
import { useState } from 'react';
import styles from './Component.module.scss';
import UserAccount from '../UserAccount/UseAccount';
import CloseMobile from '../../assets/images/CloseMobile.svg';
const MenuComponent = () => {
return (

5
react-ts/src/components/MenuMobile/MenuMobile.tsx
View File

@ -6,10 +6,11 @@ import MenuComponent from './ComponentMobile';
import OpenMobile from '../../assets/images/OpenMobile.svg';
const MenuMobile = () => {
const [IsOpen, setIsOpen] = useState(false);
function openModal (): void {
setIsOpen(true);
const openModal = () => {
setIsOpen(true)
}
return (

3
react-ts/src/components/NewsLetter/NewsLetter.module.scss
View File

@ -75,8 +75,7 @@
line-height: 16px;
}
&__input-button {
display: flex;
align-items: center;
flex-direction: column;
row-gap: 16px;
input {
max-width: 992px;

36
react-ts/src/components/SocialMedia/SocialMedia.module.scss Normal file
View File

@ -0,0 +1,36 @@
@import '../../styles/utils/Variables.scss';
.container {
display: flex;
flex-direction: column;
row-gap: 12px;
&__picture {
display: flex;
column-gap: 10px;
}
a {
font-family: $font-family;
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 16px;
color: $color-black2;
}
}
@media only screen and (min-width: 2500px) {
.container {
&__picture {
img {
width: 70px;
height: 70px;
}
}
a {
font-size: 28px;
line-height: 33px;
}
}
}

28
react-ts/src/components/SocialMedia/SocialMedia.tsx Normal file
View File

@ -0,0 +1,28 @@
import styles from './SocialMedia.module.scss';
import Facebook from '../../assets/images/Facebook.svg';
import Instagram from '../../assets/images/Instagram.svg';
import Twitter from '../../assets/images/Twitter.svg';
import YouTube from '../../assets/images/YouTube.svg';
import Linkedin from '../../assets/images/Linkedin.svg';
const SocialMedia = () => {
return (
<div className={styles['container']}>
<picture className={styles['container__picture']}>
<img src={Facebook} alt="Facebook" />
<img src={Instagram} alt="Instagram" />
<img src={Twitter} alt="Twitter" />
<img src={YouTube} alt="YouTube" />
<img src={Linkedin} alt="Linkedin" />
</picture>
<a href="/">
www.loremipsum.com
</a>
</div>
)
}
export default SocialMedia;

0
react-ts/src/components/Whatsap/WhatsApp.module.scss → react-ts/src/components/Whatsapp/WhatsApp.module.scss
View File

0
react-ts/src/components/Whatsap/WhatsApp.tsx → react-ts/src/components/Whatsapp/WhatsApp.tsx
View File