55 lines
1.5 KiB
Plaintext
55 lines
1.5 KiB
Plaintext
import Box from "@mui/material/Box";
|
|
import MedicalServicesIcon from '@mui/icons-material/MedicalServices';
|
|
import { Typography } from "@mui/material";
|
|
|
|
const Hover = {
|
|
'&:hover': {
|
|
color: 'white',
|
|
backgroundColor: '#c090e8',
|
|
cursor: 'pointer'
|
|
},
|
|
'&:hover.child': {
|
|
color: '#160325'
|
|
},
|
|
};
|
|
|
|
const CustomCard = ({ data, handleClick }) => {
|
|
return (
|
|
<Box
|
|
width='100%'
|
|
display="flex"
|
|
gap={2}
|
|
>
|
|
{data.map((item, index) => {
|
|
return (
|
|
<Box
|
|
key={index}
|
|
boxShadow={3}
|
|
minHeight={150}
|
|
minWidth={120}
|
|
my={4}
|
|
display="flex "
|
|
flexDirection='column'
|
|
alignItems="center"
|
|
gap={4}
|
|
p={2}
|
|
borderRadius="6%"
|
|
backgroundColor="#3ccfd4"
|
|
sx={Hover}
|
|
onClick={() => handleClick(item)}
|
|
|
|
>
|
|
<MedicalServicesIcon className="child" sx={{ fontSize: 40, color: "#fff" }} />
|
|
|
|
<Typography component='span' color='#fff'>
|
|
{item.name}
|
|
</Typography>
|
|
</Box>
|
|
);
|
|
})}
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export default CustomCard;
|