code handover

src/components/cards/statistics/HoverSocialCard.js

@@ -0,0 +1,70 @@
+// 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;