Files
standardnotes-app-web/packages/web/src/javascripts/Components/Preferences/PremiumOverlay.tsx

35 lines
1.1 KiB
TypeScript

import { observer } from 'mobx-react-lite'
import { FunctionComponent, useRef } from 'react'
import { UpgradePrompt } from '../PremiumFeaturesModal/Subviews/UpgradePrompt'
import { useApplication } from '../ApplicationProvider'
export const PreferencesPremiumOverlay: FunctionComponent = () => {
const ctaButtonRef = useRef<HTMLButtonElement>(null)
const application = useApplication()
const hasSubscription = application.hasValidFirstPartySubscription()
const onClick = () => {
application.preferencesController.closePreferences()
}
return (
<div className="absolute bottom-0 left-0 right-0 top-0 flex flex-col items-center justify-center">
<div className="absolute h-full w-full bg-default opacity-[86%]"></div>
<div className="border-1 z-10 rounded border border-border bg-default p-5">
<UpgradePrompt
featureName={'Plugin Gallery'}
ctaRef={ctaButtonRef}
application={application}
hasSubscription={hasSubscription}
inline={true}
onClick={onClick}
/>
</div>
</div>
)
}
export default observer(PreferencesPremiumOverlay)