Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 | 2x 2x 10x 50x 10x | import React, { useMemo, useState } from 'react';
import { Box, Stack, Typography } from '@mui/material';
const BRANDS = [
{
id: 'visa',
label: 'VISA',
logo: 'https://raw.githubusercontent.com/aaronfagan/svg-credit-card-payment-icons/main/flat/visa.svg',
},
{
id: 'mastercard',
label: 'MASTERCARD',
logo: 'https://raw.githubusercontent.com/aaronfagan/svg-credit-card-payment-icons/main/flat/mastercard.svg',
},
{
id: 'elo',
label: 'ELO',
logo: 'https://raw.githubusercontent.com/aaronfagan/svg-credit-card-payment-icons/main/flat/elo.svg',
},
{
id: 'amex',
label: 'AMEX',
logo: 'https://raw.githubusercontent.com/aaronfagan/svg-credit-card-payment-icons/main/flat/amex.svg',
},
{
id: 'hipercard',
label: 'HIPERCARD',
logo: 'https://raw.githubusercontent.com/aaronfagan/svg-credit-card-payment-icons/main/flat/hipercard.svg',
},
{
id: 'hiper',
label: 'HIPER',
logo: 'https://raw.githubusercontent.com/aaronfagan/svg-credit-card-payment-icons/main/flat/hiper.svg',
},
{
id: 'cabal',
label: 'CABAL',
logo: 'https://logo.clearbit.com/cabal.coop',
},
{
id: 'verdecard',
label: 'VERDECARD',
logo: 'https://logo.clearbit.com/verdecard.com.br',
},
{
id: 'unionpay',
label: 'UNIONPAY',
logo: 'https://raw.githubusercontent.com/aaronfagan/svg-credit-card-payment-icons/main/flat/unionpay.svg',
},
{
id: 'diners',
label: 'DINERS',
logo: 'https://raw.githubusercontent.com/aaronfagan/svg-credit-card-payment-icons/main/flat/diners.svg',
},
];
const CardBrandChips = ({ activeBrand = null, visible = true }) => {
const [failedLogos, setFailedLogos] = useState({});
const hasActive = useMemo(() => BRANDS.some((brand) => brand.id === activeBrand), [activeBrand]);
Eif (!visible) return null;
return (
<Box sx={{ mt: 0.5 }}>
<Typography variant="caption" color="text.secondary" sx={{ display: 'block', mb: 1 }}>
Bandeiras aceitas
</Typography>
<Stack direction="row" spacing={1} useFlexGap flexWrap="wrap" id="payments-card-brands-strip">
{BRANDS.map((brand) => {
const isActive = activeBrand === brand.id;
const showFallbackText = Boolean(failedLogos[brand.id]);
return (
<Box
key={brand.id}
id={`payments-card-brand-${brand.id}`}
data-brand={brand.id}
data-active={isActive ? 'true' : 'false'}
title={brand.label}
aria-label={brand.label}
sx={{
height: 40,
minWidth: 68,
px: 1,
borderRadius: 1.5,
border: '1px solid',
borderColor: isActive ? 'secondary.main' : 'divider',
bgcolor: isActive ? 'secondary.50' : 'background.paper',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
transition: 'all .2s ease',
boxShadow: isActive ? '0 0 0 2px rgba(146, 71, 255, 0.12)' : 'none',
opacity: hasActive && !isActive ? 0.65 : 1,
}}
>
{showFallbackText ? (
<Typography variant="caption" fontWeight={700} color="text.secondary" noWrap>
{brand.label}
</Typography>
) : (
<Box
component="img"
src={brand.logo}
alt={`Bandeira ${brand.label}`}
loading="lazy"
onError={() => setFailedLogos((prev) => ({ ...prev, [brand.id]: true }))}
sx={{
maxWidth: 52,
maxHeight: 24,
objectFit: 'contain',
filter: hasActive && !isActive ? 'grayscale(25%)' : 'none',
}}
/>
)}
</Box>
);
})}
</Stack>
</Box>
);
};
export default CardBrandChips;
|