File size: 1,935 Bytes
f909d7c |
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 |
import React from "react";
import {
Modal,
ModalProps,
Title,
Flex,
Button,
Stack,
List,
ThemeIcon,
Divider,
} from "@mantine/core";
import { BsCheck } from "react-icons/bs";
export const PremiumModal: React.FC<ModalProps> = ({ opened, onClose }) => {
return (
<Modal title="Your Plan" size="auto" opened={opened} onClose={onClose} centered zIndex={202}>
<Flex gap="lg">
<Stack gap="xs">
<Title order={3}>Free plan</Title>
<Button variant="filled" color="dark" size="md">
Your current plan
</Button>
<List
spacing="xs"
size="sm"
center
icon={
<ThemeIcon color="dark.6" size={20} radius="xl">
<BsCheck size="1rem" />
</ThemeIcon>
}
>
<List.Item>Store/Share up to 15 files</List.Item>
<List.Item>Visualize standard size data</List.Item>
</List>
</Stack>
<Divider color="gray" orientation="vertical" />
<Stack gap="xs">
<Title order={3}>JSON Crack Plus</Title>
<Button
component="a"
href="/pricing"
variant="filled"
color="teal"
size="md"
target="_blank"
>
Upgrade plan
</Button>
<List
spacing="xs"
size="sm"
center
icon={
<ThemeIcon color="teal" size={20} radius="xl">
<BsCheck size="1rem" />
</ThemeIcon>
}
>
<List.Item>Edit directly on graph</List.Item>
<List.Item>JSON Schema support</List.Item>
<List.Item>Visualize data at full capability</List.Item>
<List.Item>Save & share up to 200 files</List.Item>
</List>
</Stack>
</Flex>
</Modal>
);
};
|