Emails
1 month ago
EngagementChart
2 months ago
MediaHub
1 month ago
Onboarding
2 months ago
Popup
2 months ago
Skeletons
1 month ago
WhatsNew
2 months ago
charts
2 months ago
test
2 months ago
AdminMenuSync.js
2 months ago
ChartEmptyState.js
2 months ago
ChooseDate.js
2 months ago
ColorPicker.js
2 months ago
ExtendPlugins.js
2 months ago
Filters.js
2 months ago
Link.js
2 months ago
Navbar.js
1 month ago
NoFound.js
2 months ago
PageHeader.js
2 months ago
PluginRecommendations.js
2 months ago
PostScheduleField.js
2 months ago
PrestoPlayerIcon.js
2 months ago
ProGateOverlay.js
2 months ago
QuickAccess.js
2 months ago
RankedTable.js
2 months ago
StatCard.js
2 months ago
TopMedia.js
2 months ago
TopPerformingMedia.js
2 months ago
TopUsers.js
2 months ago
TruncatedTitle.js
2 months ago
UpgradeNotice.js
2 months ago
UpgradeToPro.js
2 months ago
VideoModal.js
2 months ago
WelcomeBanner.js
2 months ago
ProGateOverlay.js
45 lines
| 1 | import { useRef, useEffect } from 'react'; |
| 2 | import UpgradeToPro from "./UpgradeToPro"; |
| 3 | |
| 4 | /** |
| 5 | * Full-page Pro gate overlay. Renders a blurred skeleton preview |
| 6 | * with a centered UpgradeToPro card. Used on Pro-only pages |
| 7 | * (Analytics, Emails) to show a frosted "sneak peek" of the content. |
| 8 | * |
| 9 | * @param {Object} props |
| 10 | * @param {JSX.Element} props.children - The skeleton component to blur behind the overlay. |
| 11 | */ |
| 12 | const ProGateOverlay = ({ children }) => { |
| 13 | const inertRef = useRef(null); |
| 14 | |
| 15 | useEffect(() => { |
| 16 | if (inertRef.current) { |
| 17 | inertRef.current.setAttribute('inert', ''); |
| 18 | } |
| 19 | }, []); |
| 20 | |
| 21 | return ( |
| 22 | <div className="relative flex-1 min-h-0 overflow-hidden"> |
| 23 | <div |
| 24 | ref={inertRef} |
| 25 | aria-hidden="true" |
| 26 | className="absolute inset-0 overflow-hidden blur-[3px] pointer-events-none select-none opacity-80" |
| 27 | > |
| 28 | {children} |
| 29 | </div> |
| 30 | <div className="absolute inset-0 bg-white/30 flex items-center justify-center p-8"> |
| 31 | {/* max-w-3xl keeps the card tight so the illustration and copy sit |
| 32 | close together — wider widths leave too much whitespace between |
| 33 | the two columns. -translate-y nudges the card above the geometric |
| 34 | center so it sits in the optical center of the viewport (the page |
| 35 | chrome above pulls perceived center upward). */} |
| 36 | <div className="max-w-xl w-full drop-shadow-2xl -translate-y-[6vh]"> |
| 37 | <UpgradeToPro layout="horizontal" /> |
| 38 | </div> |
| 39 | </div> |
| 40 | </div> |
| 41 | ); |
| 42 | }; |
| 43 | |
| 44 | export default ProGateOverlay; |
| 45 |