ohctechv3/.svn/pristine/13/135aa4d9975c60ab19c6694ce770559de13715f1.svn-base

55 lines
1.5 KiB
Plaintext
Raw Normal View History

2024-10-28 15:03:36 +05:30
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;