Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 | // import * as React from "react";
// import { palette } from "@palette";
// mui
import { Box } from "@mui/material";
import Grid from "@mui/material/Grid";
import { useTheme } from "@mui/material/styles";
import useMediaQuery from "@mui/material/useMediaQuery";
// components
import BannerBox from "./BannerBox";
import BannerMobile from "./BannerMobile";
// assets
const backgroundGradient = {
position: "absolute",
background:
"linear-gradient(104.33deg, rgba(129, 68, 154, 0) 25.61%, #81449A 54.5%, #E6B96F 82.41%)",
borderRadius: "12px",
top: "10px",
width: "calc(100% + 6px)",
height: "calc( 100% - 20px )",
};
const mainContent = {
gap: "16px",
display: "flex",
padding: "16px 24px",
flexDirection: "column",
backgroundColor: "rgba(246, 250, 255, 0.8)",
boxShadow: "0px 4px 16px rgba(0, 0, 0, 0.05)",
border: "2px solid rgba(255, 255, 255, 0.5)",
backdropFilter: "blur( 32px )",
position: "relative",
borderRadius: "12px",
};
const Banner = () => {
const theme = useTheme();
const isDesktop = useMediaQuery(theme.breakpoints.up("sm"));
return (
<>
{isDesktop ? (
<Box mt={1} mb={3} position="relative">
{/* Background gradient */}
<Box sx={backgroundGradient} />
{/* the main content */}
<Box sx={mainContent}>
<Grid container rowSpacing={1} columnSpacing={2}>
<Grid item xs={4}>
<BannerBox digits={4021.23} isAmount type="Sum Total" />
</Grid>
<Grid item xs={4}>
<BannerBox digits={3} type="Events" />
</Grid>
<Grid item xs={4}>
<BannerBox digits={0} type="Memberships" />
</Grid>
<Grid item xs={4}>
<BannerBox digits={18} type="Donations" />
</Grid>
<Grid item xs={4}>
<BannerBox digits={11} type="Sweepstakes" />
</Grid>
<Grid item xs={4}>
<BannerBox digits={12} type="Invoices" />
</Grid>
</Grid>
</Box>
</Box>
) : (
<BannerMobile />
)}
</>
);
};
export default Banner;
|