44 lines
1.5 KiB
TypeScript
44 lines
1.5 KiB
TypeScript
import { Button, Typography, useMediaQuery, useTheme } from "@mui/material";
|
|
|
|
interface Props {
|
|
name: string;
|
|
image: string;
|
|
isSelected?: boolean;
|
|
onClick: () => void;
|
|
}
|
|
|
|
export default function PaymentMethodCard({ name, image, isSelected, onClick }: Props) {
|
|
const theme = useTheme();
|
|
const upSm = useMediaQuery(theme.breakpoints.up("sm"));
|
|
|
|
return (
|
|
<Button
|
|
sx={{
|
|
width: upSm ? "237px" : "100%",
|
|
p: "20px",
|
|
pr: "10px",
|
|
display: "flex",
|
|
justifyContent: "start",
|
|
borderRadius: "8px",
|
|
backgroundColor: theme.palette.background.default,
|
|
border: isSelected ? `1px solid ${theme.palette.purple.main}` : `1px solid ${theme.palette.gray.main}`,
|
|
gap: "20px",
|
|
alignItems: "center",
|
|
flexWrap: "wrap",
|
|
boxShadow: isSelected ? `0 0 0 1.5px ${theme.palette.purple.main};` : "none",
|
|
"&:hover": {
|
|
backgroundColor: theme.palette.purple.main,
|
|
border: `1px solid ${theme.palette.purple.main}`,
|
|
"& > p": {
|
|
color: "white",
|
|
}
|
|
},
|
|
}}
|
|
onClick={onClick}
|
|
>
|
|
<img src={image} alt="payment method" />
|
|
<Typography sx={{ color: theme.palette.gray.dark }}>{name}</Typography>
|
|
</Button>
|
|
);
|
|
}
|