71 lines
1.7 KiB
JavaScript
71 lines
1.7 KiB
JavaScript
// material-ui
|
|
import { Box, Card, CardContent, Grid, Typography } from '@mui/material';
|
|
|
|
// ===========================|| HOVER SOCIAL CARD ||=========================== //
|
|
|
|
const HoverSocialCard = ({
|
|
primary,
|
|
secondary,
|
|
percentage,
|
|
// iconPrimary,
|
|
color,
|
|
sx
|
|
}) => {
|
|
// const IconPrimary = iconPrimary;
|
|
// const primaryIcon = iconPrimary ? <IconPrimary /> : null;
|
|
|
|
return (
|
|
<Card
|
|
elevation={0}
|
|
sx={{
|
|
background: color,
|
|
position: 'relative',
|
|
color: '#fff',
|
|
'&:hover svg': {
|
|
opacity: 1,
|
|
transform: 'scale(1.1)'
|
|
},
|
|
...sx
|
|
}}
|
|
>
|
|
<CardContent>
|
|
<Box
|
|
sx={{
|
|
position: 'absolute',
|
|
right: 15,
|
|
top: 25,
|
|
color: '#fff',
|
|
|
|
'& svg': {
|
|
width: 36,
|
|
height: 36,
|
|
opacity: 0.5,
|
|
transition: 'all .3s ease-in-out'
|
|
}
|
|
}}
|
|
>
|
|
<Typography variant="h2" color="inherit" sx={{ fontSize: { xs: 20, md: 25 } }}>
|
|
{/* {percentage.toString()} % */}
|
|
{percentage && typeof percentage === 'number' ? `${percentage.toString()} %` : percentage}
|
|
</Typography>
|
|
{/* {primaryIcon} */}
|
|
</Box>
|
|
<Grid container spacing={0}>
|
|
<Grid item xs={12}>
|
|
<Typography variant="h3" color="inherit" sx={{ fontSize: { xs: 16, md: 20 } }}>
|
|
{secondary}
|
|
</Typography>
|
|
</Grid>
|
|
<Grid item xs={12}>
|
|
<Typography variant="subtitle2" color="inherit">
|
|
{primary}
|
|
</Typography>
|
|
</Grid>
|
|
</Grid>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
};
|
|
|
|
export default HoverSocialCard;
|