forked from M3-Academy/challenge-vtex-io
Entrega do Desafio #1
3
react/PaymentMethods.tsx
Normal file
3
react/PaymentMethods.tsx
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
import PaymentMethods from "./components/PaymentMethods/PaymentMethods";
|
||||||
|
|
||||||
|
export default PaymentMethods;
|
73
react/components/PaymentMethods/PaymentMethods.tsx
Normal file
73
react/components/PaymentMethods/PaymentMethods.tsx
Normal file
@ -0,0 +1,73 @@
|
|||||||
|
import React from "react";
|
||||||
|
|
||||||
|
const PaymentMethods = () => {
|
||||||
|
return (
|
||||||
|
<div className="vtex-menu-2-x-FooterRightBlock">
|
||||||
|
<span className="vtex-menu-2-x-SpanTitleBig">Formas de pagamento</span>
|
||||||
|
<ul className="vtex-menu-2-x-UlGroup">
|
||||||
|
<ul className="vtex-menu-2-x-UlSecondary">
|
||||||
|
<li>
|
||||||
|
<img
|
||||||
|
className="vtex-menu-2-x-ImgCard"
|
||||||
|
src="https://agenciamagma.vteximg.com.br/arquivos/mastercard-icon-m3academy-anacarolinaduartecavalcante.svg"
|
||||||
|
alt="ícone mastercard"
|
||||||
|
/>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<img
|
||||||
|
className="vtex-menu-2-x-ImgCard"
|
||||||
|
src="https://agenciamagma.vteximg.com.br/arquivos/diners-icon-m3academy-anacarolinaduartecavalcante.svg"
|
||||||
|
alt="ícone diners"
|
||||||
|
/>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<img
|
||||||
|
className="vtex-menu-2-x-ImgCard"
|
||||||
|
src="https://agenciamagma.vteximg.com.br/arquivos/boleto-icon-m3academy-anacarolinaduartecavalcante.svg"
|
||||||
|
alt="ícone boleto"
|
||||||
|
/>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<img
|
||||||
|
className="vtex-menu-2-x-ImgCard"
|
||||||
|
src="https://agenciamagma.vteximg.com.br/arquivos/pix-icon-m3academy-anacarolinaduartecavalcante.svg"
|
||||||
|
alt="ícone pix"
|
||||||
|
/>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<ul className="vtex-menu-2-x-UlSecondary">
|
||||||
|
<li>
|
||||||
|
<img
|
||||||
|
className="vtex-menu-2-x-ImgCard"
|
||||||
|
src="https://agenciamagma.vteximg.com.br/arquivos/elo-icon-m3academy-anacarolinaduartecavalcante.svg"
|
||||||
|
alt="ícone elo"
|
||||||
|
/>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<img
|
||||||
|
className="vtex-menu-2-x-ImgCard"
|
||||||
|
src="https://agenciamagma.vteximg.com.br/arquivos/hipercard-icon-m3academy-anacarolinaduartecavalcante.svg"
|
||||||
|
alt="ícone hipercard"
|
||||||
|
/>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<img
|
||||||
|
className="vtex-menu-2-x-ImgCard"
|
||||||
|
src="https://agenciamagma.vteximg.com.br/arquivos/visa-icon-m3academy-anacarolinaduartecavalcante.svg"
|
||||||
|
alt="ícone visa"
|
||||||
|
/>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<img
|
||||||
|
className="vtex-menu-2-x-ImgCard"
|
||||||
|
src="https://agenciamagma.vteximg.com.br/arquivos/amex-icon-m3academy-anacarolinaduartecavalcante.svg"
|
||||||
|
alt="ícone amex"
|
||||||
|
/>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default PaymentMethods;
|
Loading…
Reference in New Issue
Block a user