forked from M3-Academy/desafio-react-e-typescript
refactor: Aplica mudanças no código
This commit is contained in:
parent
3d6d9d73b6
commit
79116036b7
@ -51,11 +51,11 @@
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
li {
|
||||
.li-card {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.li-card {
|
||||
.card {
|
||||
width: auto;
|
||||
height: 20px;
|
||||
|
||||
@ -92,59 +92,49 @@
|
||||
}
|
||||
|
||||
&__developedby {
|
||||
ul {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 13px;
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
@media ((min-width: 1025px) and (max-width: 1150px)) {
|
||||
gap: 7px;
|
||||
}
|
||||
|
||||
&__li,
|
||||
&__text {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 13px;
|
||||
|
||||
}
|
||||
|
||||
&__text {
|
||||
font-size: 10px;
|
||||
line-height: 12px;
|
||||
text-transform: capitalize;
|
||||
color: variables.$white;
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
gap: 12px;
|
||||
font-size: 20px;
|
||||
line-height: 23px;
|
||||
}
|
||||
}
|
||||
|
||||
@media ((min-width: 1025px) and (max-width: 1150px)) {
|
||||
gap: 7px;
|
||||
&__logo-vtex {
|
||||
width: 44px;
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
width: 84px;
|
||||
}
|
||||
|
||||
li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 13px;
|
||||
}
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
gap: 12px;
|
||||
}
|
||||
&__logo-m3 {
|
||||
width: 28px;
|
||||
|
||||
@media ((min-width: 1025px) and (max-width: 1150px)) {
|
||||
gap: 7px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 10px;
|
||||
line-height: 12px;
|
||||
text-transform: capitalize;
|
||||
color: variables.$white;
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
font-size: 20px;
|
||||
line-height: 23px;
|
||||
}
|
||||
}
|
||||
|
||||
.logo-vtex {
|
||||
width: 44px;
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
width: 84px;
|
||||
}
|
||||
}
|
||||
|
||||
.logo-m3 {
|
||||
width: 28px;
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
width: 54px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 2500px) {
|
||||
width: 54px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -14,45 +14,103 @@ import imgLogoBoleto from "./assets/Boleto.png";
|
||||
import imgLogoVtexPCI from "./assets/vtex-pci-200.png";
|
||||
|
||||
import { IconList } from "../IconList/IconList";
|
||||
import { ItemList } from "../ItemList/ItemList";
|
||||
|
||||
const FooterBottom = () => {
|
||||
return (
|
||||
<div className={styles["footer-bottom"]}>
|
||||
<div className={styles["footer-bottom__wrapper"]}>
|
||||
|
||||
return (
|
||||
<div className={styles["footer-bottom"]}>
|
||||
<div className={styles["footer-bottom__wrapper"]}>
|
||||
<div className={styles["footer-bottom__address"]}>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing</p>
|
||||
<p>Elit, sed do eiusmod tempor</p>
|
||||
</div>
|
||||
|
||||
<ul className={styles["footer-bottom__payments-icons"]}>
|
||||
<IconList src={imgLogoMaster} alt="Logo Master Card" className={styles["li-card"]}/>
|
||||
<IconList src={imgLogoVisa} alt="Logo Visa" className={styles["li-card"]}/>
|
||||
<IconList src={imgLogoAmericanExpress} alt="Logo American Express" className={styles["li-card"]}/>
|
||||
<IconList src={imgLogoElo} alt="Logo Elo" className={styles["li-card"]}/>
|
||||
<IconList src={imgLogoHipercard} alt="Logo Hipercard" className={styles["li-card"]}/>
|
||||
<IconList src={imgLogoPayPal} alt="Logo PayPal" className={styles["li-card"]}/>
|
||||
<IconList src={imgLogoBoleto} alt="Logo Boleto" className={styles["li-card"]}/>
|
||||
|
||||
<li className={styles["li-divider"]}></li>
|
||||
|
||||
<IconList src={imgLogoVtexPCI} alt="Logo Vtex PCI" className={styles["li-vtexpci"]}/>
|
||||
</ul>
|
||||
|
||||
<div className={styles["footer-bottom__developedby"]}>
|
||||
<ul>
|
||||
<a href="/">
|
||||
<IconList text="Powered by" src={imgLogoVtex} alt="Logo Vtex" className={styles["logo-vtex"]}/>
|
||||
</a>
|
||||
|
||||
<a href="/">
|
||||
<IconList text="Developed by" src={imgLogoM3} alt="Logo M3" className={styles["logo-m3"]}/>
|
||||
</a>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles["footer-bottom__address"]}>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing</p>
|
||||
<p>Elit, sed do eiusmod tempor</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export {FooterBottom};
|
||||
<ul className={styles["footer-bottom__payments-icons"]}>
|
||||
<IconList
|
||||
src={imgLogoMaster}
|
||||
alt="Logo Master Card"
|
||||
imgClassName={styles["card"]}
|
||||
liClassName={styles["li-card"]}
|
||||
/>
|
||||
<IconList
|
||||
src={imgLogoVisa}
|
||||
alt="Logo Visa"
|
||||
imgClassName={styles["card"]}
|
||||
liClassName={styles["li-card"]}
|
||||
/>
|
||||
<IconList
|
||||
src={imgLogoAmericanExpress}
|
||||
alt="Logo American Express"
|
||||
imgClassName={styles["card"]}
|
||||
liClassName={styles["li-card"]}
|
||||
/>
|
||||
<IconList
|
||||
src={imgLogoElo}
|
||||
alt="Logo Elo"
|
||||
imgClassName={styles["card"]}
|
||||
liClassName={styles["li-card"]}
|
||||
/>
|
||||
<IconList
|
||||
src={imgLogoHipercard}
|
||||
alt="Logo Hipercard"
|
||||
imgClassName={styles["card"]}
|
||||
liClassName={styles["li-card"]}
|
||||
/>
|
||||
<IconList
|
||||
src={imgLogoPayPal}
|
||||
alt="Logo PayPal"
|
||||
imgClassName={styles["card"]}
|
||||
liClassName={styles["li-card"]}
|
||||
/>
|
||||
<IconList
|
||||
src={imgLogoBoleto}
|
||||
alt="Logo Boleto"
|
||||
imgClassName={styles["card"]}
|
||||
liClassName={styles["li-card"]}
|
||||
/>
|
||||
|
||||
<li className={styles["li-divider"]}></li>
|
||||
|
||||
<IconList
|
||||
src={imgLogoVtexPCI}
|
||||
alt="Logo Vtex PCI"
|
||||
imgClassName={styles["li-vtexpci"]}
|
||||
liClassName={styles["li-card"]}
|
||||
/>
|
||||
</ul>
|
||||
|
||||
<ul className={styles["footer-bottom__developedby"]}>
|
||||
<ItemList
|
||||
text="Powered by"
|
||||
textClassName={styles["footer-bottom__developedby__text"]}
|
||||
/>
|
||||
<a href="/">
|
||||
<IconList
|
||||
src={imgLogoVtex}
|
||||
alt="Logo Vtex"
|
||||
imgClassName={styles["footer-bottom__developedby__logo-vtex"]}
|
||||
liClassName={styles["footer-bottom__developedby__li"]}
|
||||
/>
|
||||
</a>
|
||||
|
||||
<ItemList
|
||||
text="Developed by"
|
||||
textClassName={styles["footer-bottom__developedby__text"]}
|
||||
/>
|
||||
<a href="/">
|
||||
<IconList
|
||||
src={imgLogoM3}
|
||||
alt="Logo M3"
|
||||
imgClassName={styles["footer-bottom__developedby__logo-m3"]}
|
||||
liClassName={styles["footer-bottom__developedby__li"]}
|
||||
/>
|
||||
</a>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export { FooterBottom };
|
||||
|
||||
@ -3,17 +3,16 @@ import React from "react";
|
||||
interface Icon {
|
||||
src: string;
|
||||
alt: string;
|
||||
className: string;
|
||||
text?: string;
|
||||
imgClassName?: string;
|
||||
liClassName?: string;
|
||||
}
|
||||
|
||||
const IconList = ( props: Icon ) => {
|
||||
const { src, alt, className, text } = props;
|
||||
const { src, alt, imgClassName, liClassName } = props;
|
||||
|
||||
return (
|
||||
<li>
|
||||
<p>{text}</p>
|
||||
<img src={src} alt={alt} className={className}/>
|
||||
<li className={liClassName}>
|
||||
<img src={src} alt={alt} className={imgClassName}/>
|
||||
</li>
|
||||
);
|
||||
};
|
||||
|
||||
14
src/components/ItemList/ItemList.tsx
Normal file
14
src/components/ItemList/ItemList.tsx
Normal file
@ -0,0 +1,14 @@
|
||||
import React from "react";
|
||||
|
||||
interface Icon {
|
||||
text: string;
|
||||
textClassName?: string;
|
||||
}
|
||||
|
||||
const ItemList = ( props: Icon) => {
|
||||
const { text, textClassName } = props;
|
||||
|
||||
return <li className={textClassName}> { text } </li>;
|
||||
};
|
||||
|
||||
export { ItemList };
|
||||
@ -1,29 +0,0 @@
|
||||
@use '../../variables';
|
||||
|
||||
.nav-bar__item {
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
text-transform: uppercase;
|
||||
color: variables.$white;
|
||||
cursor: pointer;
|
||||
|
||||
@media (min-width: 3600px) {
|
||||
font-size: 32px;
|
||||
line-height: 38px;
|
||||
}
|
||||
|
||||
@media ((min-width: 2500px) and (max-width: 3599px)) {
|
||||
font-size: 28px;
|
||||
line-height: 33px;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
color: variables.$gray-400;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
filter: brightness(80%);
|
||||
}
|
||||
}
|
||||
@ -1,10 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
import styles from "./ItemNavBar.module.scss";
|
||||
|
||||
const ItemNavBar = ( props:any) => {
|
||||
const { text } = props;
|
||||
return <li className={styles["nav-bar__item"]}> { text } </li>;
|
||||
};
|
||||
|
||||
export { ItemNavBar };
|
||||
@ -168,7 +168,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
span{
|
||||
span {
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
color: variables.$red;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user