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 | 47x 47x 188x 36x 45x 36x 188x 36x | import { Box, Stack } from "@mui/material";
import { CheckIcon } from "@phosphor-icons/react";
import SectionCardBase from "@shared/SidePanel/components/SectionCard/SectionCardBase";
import GiveText from "@shared/Text/GiveText";
import { useAppTheme, styled } from "@theme/v2/Provider";
import VisaCard from "@assets/images/PaymentCards/visa.svg";
import MasterCard from "@assets/images/PaymentCards/mastercard.svg";
import AmexCard from "@assets/images/PaymentCards/amex.svg";
import { DiscoverCardIcon } from "@assets/builderIcons";
function CardTypes() {
const { palette } = useAppTheme();
return (
<SectionCardBase
leftTitle="Card Types"
childrenContainerSx={{
bgcolor: "transparent",
p: "0px",
}}
sx={{
marginTop: "20px",
}}
>
<Box display="flex" flexWrap="wrap" justifyContent="flex-start">
{cardTypesInfo.map(({ name, Icon }) => {
return (
<Container key={name}>
{Icon}
<GiveText fontSize="12px" color="primary">
{name}
</GiveText>
<CheckIcon fill={palette.text.primary} size="16px" />
</Container>
);
})}
</Box>
</SectionCardBase>
);
}
const Image = styled("img")<{ hasBackground?: boolean }>(
({ theme, hasBackground }) => ({
height: 18,
width: 28,
...(hasBackground && {
borderRadius: "2px",
background: theme.palette.primitive?.neutral[0],
}),
}),
);
const Container = styled(Stack)(({ theme }) => {
return {
gap: "8px",
flexDirection: "row",
borderRadius: "8px",
padding: "8px",
alignItems: "center",
margin: "4px",
backgroundColor: theme.palette.primitive?.transparent["darken-5"],
};
});
const cardTypesInfo = [
{
Icon: <Image src={VisaCard} hasBackground />,
name: "Visa",
},
{
Icon: <Image src={MasterCard} />,
name: "Mastercard",
},
{
Icon: <Image src={AmexCard} />,
name: "AMEX",
},
{
Icon: <DiscoverCardIcon height={18} width={28} />,
name: "Discover",
},
];
export default CardTypes;
|