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 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 | 3x | import LockOutlinedIcon from "@mui/icons-material/LockOutlined";
import { Box, Button, Paper, Stack, Typography } from "@mui/material";
import { alpha, useTheme } from "@mui/material/styles";
/**
* Blurred mock preview with a centered upgrade message (for locked plan features).
*/
const FeatureLockedBlur = ({
title = "This feature is locked",
description,
featureLabel = null,
onUpgrade,
upgradeLabel = "View upgrade options",
mockContent,
blur = 8,
minHeight = 360,
id = "feature-locked-blur",
}) => {
const theme = useTheme();
const body =
description ??
(featureLabel
? `${featureLabel} is not included on your district's current plan.`
: "This area is not included on your district's current plan.");
return (
<Box
id={id}
sx={{
position: "relative",
width: "100%",
minHeight,
borderRadius: 2,
overflow: "hidden",
bgcolor: alpha(theme.palette.grey[500], theme.palette.mode === "light" ? 0.04 : 0.12),
}}
>
<Box
aria-hidden
sx={{
filter: `blur(${blur}px)`,
pointerEvents: "none",
userSelect: "none",
opacity: 0.92,
p: { xs: 1, sm: 2 },
}}
>
{mockContent}
</Box>
<Box
sx={{
position: "absolute",
inset: 0,
display: "flex",
alignItems: "center",
justifyContent: "center",
p: 2,
bgcolor: alpha(theme.palette.background.paper, theme.palette.mode === "light" ? 0.55 : 0.72),
backdropFilter: "blur(4px)",
}}
>
<Paper
elevation={0}
sx={{
maxWidth: 400,
width: "100%",
p: 2.5,
textAlign: "center",
borderRadius: 2,
border: `1px solid ${alpha(theme.palette.grey[500], 0.16)}`,
boxShadow: theme.customShadows?.z8,
}}
>
<Stack spacing={1.5} alignItems="center">
<Box
sx={{
width: 48,
height: 48,
borderRadius: "50%",
display: "flex",
alignItems: "center",
justifyContent: "center",
bgcolor: alpha(theme.palette.primary.main, 0.1),
color: "primary.main",
}}
>
<LockOutlinedIcon />
</Box>
<Typography variant="subtitle1" component="h3" sx={{ fontWeight: 600, lineHeight: 1.35 }}>
{title}
</Typography>
<Typography variant="body2" color="text.secondary" sx={{ lineHeight: 1.65 }}>
{body}
</Typography>
{onUpgrade ? (
<Button variant="soft" color="primary" onClick={onUpgrade} sx={{ fontWeight: 600, mt: 0.5 }}>
{upgradeLabel}
</Button>
) : null}
<Typography variant="caption" color="text.secondary">
Contact your district administrator to upgrade.
</Typography>
</Stack>
</Paper>
</Box>
</Box>
);
};
export default FeatureLockedBlur;
|