mirror/php-web-maker
1
0
Fork 0
mirror of https://github.com/chinchang/web-maker.git synced 2025-07-10 16:46:28 +02:00
Code Issues Releases Wiki Activity

pro modal

Browse Source
This commit is contained in:
Kushagra Gour
2024-03-14 18:58:59 +05:30
parent e87d4ed213
commit b938966a45
7 changed files with 105 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
src/components/Pro.jsx
View File

@ -5,6 +5,8 @@ import Switch from './Switch';
import { alertsService } from '../notifications';
import { A, Button } from './common';
import { useCheckout } from '../hooks/useCheckout';
import { Text } from './Text';
import { Icon } from './Icons';
export function Pro({ user }) {
const hasCheckoutLoaded = useCheckout();
@ -24,12 +26,71 @@ export function Pro({ user }) {
}, [hasCheckoutLoaded]);
return (
<VStack gap={4} align="stretch">
<A
class="btn lemonsqueezy-button"
href={`https://web-maker.lemonsqueezy.com/checkout/buy/1601bc00-9623-435b-b1de-2a70a2445c13?embed=1&checkout[custom][userId]=${user.uid}`}
>
Go <ProBadge />
</A>
<Stack gap={2} align="stretch">
<Card
price="Free"
name="Starter"
features={[
'Unlimited private creations',
'2 Public creations',
'1 Files mode creation'
]}
/>
<Card
bg="#674dad"
price="$6/mo"
name="Pro"
action={
<A
class="btn btn--primary lemonsqueezy-button d-f jc-c ai-c"
style="gap:0.2rem"
href={`https://web-maker.lemonsqueezy.com/checkout/buy/1601bc00-9623-435b-b1de-2a70a2445c13?embed=1&checkout[custom][userId]=${user.uid}`}
>
Go <ProBadge />
</A>
}
features={[
'Unlimited private creations',
'Unlimited public creations',
'Unlimited files mode creations',
'Asset hosting',
'Priority support',
'No Ads'
]}
/>
</Stack>
</VStack>
);
}
const Card = ({ bg, name, price, action, features }) => {
return (
<div class="plan-card" style={{ background: bg }}>
<VStack gap={2} align="stretch" justify="flex-start">
<VStack gap={0} align="stretch" justify="flex-start">
<Text transform="uppercase" weight="600">
{name}
</Text>
<Text size="5" weight="800" appearance="primary">
{' '}
{price}
</Text>
</VStack>
{action}
{!action && (
<a class="btn" aria-hidden="true" style="visibility:hidden">
s
</a>
)}
<VStack gap={1} align="flex-start">
{features.map(f => (
<HStack gap={1} align="center">
<Icon name="check-circle" size="1.4rem" />
{f}
</HStack>
))}
</VStack>
</VStack>
</div>
);
};