mirror of
https://github.com/AykutSarac/jsoncrack.com.git
synced 2025-01-27 15:22:56 +08:00
feat: show initial modal
This commit is contained in:
parent
45f9f798f3
commit
59c2588709
@ -32,6 +32,7 @@
|
||||
"gofmt.js": "^0.0.2",
|
||||
"html-to-image": "^1.11.11",
|
||||
"jq-web": "^0.5.1",
|
||||
"js-cookie": "^3.0.5",
|
||||
"js-yaml": "^4.1.0",
|
||||
"json-2-csv": "^5.5.4",
|
||||
"json-schema-faker": "^0.5.6",
|
||||
@ -63,6 +64,7 @@
|
||||
"devDependencies": {
|
||||
"@next/bundle-analyzer": "^14.2.5",
|
||||
"@trivago/prettier-plugin-sort-imports": "^4.3.0",
|
||||
"@types/js-cookie": "^3.0.6",
|
||||
"@types/js-yaml": "^4.0.9",
|
||||
"@types/jsonwebtoken": "^9.0.6",
|
||||
"@types/jxon": "^2.0.5",
|
||||
|
21
pnpm-lock.yaml
generated
21
pnpm-lock.yaml
generated
@ -47,6 +47,9 @@ importers:
|
||||
jq-web:
|
||||
specifier: ^0.5.1
|
||||
version: 0.5.1
|
||||
js-cookie:
|
||||
specifier: ^3.0.5
|
||||
version: 3.0.5
|
||||
js-yaml:
|
||||
specifier: ^4.1.0
|
||||
version: 4.1.0
|
||||
@ -135,6 +138,9 @@ importers:
|
||||
'@trivago/prettier-plugin-sort-imports':
|
||||
specifier: ^4.3.0
|
||||
version: 4.3.0(prettier@3.3.3)
|
||||
'@types/js-cookie':
|
||||
specifier: ^3.0.6
|
||||
version: 3.0.6
|
||||
'@types/js-yaml':
|
||||
specifier: ^4.0.9
|
||||
version: 4.0.9
|
||||
@ -663,6 +669,9 @@ packages:
|
||||
'@types/estree@1.0.5':
|
||||
resolution: {integrity: sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==}
|
||||
|
||||
'@types/js-cookie@3.0.6':
|
||||
resolution: {integrity: sha512-wkw9yd1kEXOPnvEeEV1Go1MmxtBJL0RR79aOTAApecWFVu7w0NNXNqhcWgvw2YgZDYadliXkl14pa3WXw5jlCQ==}
|
||||
|
||||
'@types/js-yaml@4.0.9':
|
||||
resolution: {integrity: sha512-k4MGaQl5TGo/iipqb2UDG2UwjXziSWkh0uysQelTlJpX1qGlpUZYm8PnO4DxG1qBomtJUdYJ6qR6xdIah10JLg==}
|
||||
|
||||
@ -1737,6 +1746,10 @@ packages:
|
||||
jq-web@0.5.1:
|
||||
resolution: {integrity: sha512-3Fa3E6g3U1O1j46ljy0EM10yRr4txzILga8J7bqOG8F89gZ6Lilz82WG9z6TItWpYEO0YGa4W8yFGj+NMM1xqQ==}
|
||||
|
||||
js-cookie@3.0.5:
|
||||
resolution: {integrity: sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==}
|
||||
engines: {node: '>=14'}
|
||||
|
||||
js-tokens@4.0.0:
|
||||
resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
|
||||
|
||||
@ -2800,7 +2813,7 @@ snapshots:
|
||||
|
||||
'@babel/generator@7.17.7':
|
||||
dependencies:
|
||||
'@babel/types': 7.17.0
|
||||
'@babel/types': 7.24.9
|
||||
jsesc: 2.5.2
|
||||
source-map: 0.5.7
|
||||
|
||||
@ -2841,7 +2854,7 @@ snapshots:
|
||||
|
||||
'@babel/parser@7.24.8':
|
||||
dependencies:
|
||||
'@babel/types': 7.17.0
|
||||
'@babel/types': 7.24.9
|
||||
|
||||
'@babel/runtime@7.24.8':
|
||||
dependencies:
|
||||
@ -3331,6 +3344,8 @@ snapshots:
|
||||
|
||||
'@types/estree@1.0.5': {}
|
||||
|
||||
'@types/js-cookie@3.0.6': {}
|
||||
|
||||
'@types/js-yaml@4.0.9': {}
|
||||
|
||||
'@types/json5@0.0.29': {}
|
||||
@ -4599,6 +4614,8 @@ snapshots:
|
||||
|
||||
jq-web@0.5.1: {}
|
||||
|
||||
js-cookie@3.0.5: {}
|
||||
|
||||
js-tokens@4.0.0: {}
|
||||
|
||||
js-yaml@3.14.1:
|
||||
|
BIN
public/assets/todiagram_img.png
Normal file
BIN
public/assets/todiagram_img.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 313 KiB |
BIN
public/assets/todiagram_img.webp
Normal file
BIN
public/assets/todiagram_img.webp
Normal file
Binary file not shown.
After Width: | Height: | Size: 53 KiB |
@ -1,30 +1,44 @@
|
||||
import React from "react";
|
||||
import Link from "next/link";
|
||||
import type { ModalProps } from "@mantine/core";
|
||||
import {
|
||||
Text,
|
||||
Divider,
|
||||
List,
|
||||
Button,
|
||||
Modal,
|
||||
Flex,
|
||||
Box,
|
||||
AspectRatio,
|
||||
ThemeIcon,
|
||||
Image,
|
||||
} from "@mantine/core";
|
||||
import { Text, List, Button, Modal, Flex, Box, ThemeIcon, Image, Paper } from "@mantine/core";
|
||||
import styled from "styled-components";
|
||||
import { IoMdCheckmarkCircleOutline } from "react-icons/io";
|
||||
import { MdChevronRight } from "react-icons/md";
|
||||
|
||||
const StyledPaper = styled(Paper)<any>`
|
||||
--bg-color: ${({ theme }) => theme.GRID_BG_COLOR};
|
||||
--line-color-1: ${({ theme }) => theme.GRID_COLOR_PRIMARY};
|
||||
--line-color-2: ${({ theme }) => theme.GRID_COLOR_SECONDARY};
|
||||
|
||||
background-color: var(--bg-color);
|
||||
background-image: linear-gradient(var(--line-color-1) 1.5px, transparent 1.5px),
|
||||
linear-gradient(90deg, var(--line-color-1) 1.5px, transparent 1.5px),
|
||||
linear-gradient(var(--line-color-2) 1px, transparent 1px),
|
||||
linear-gradient(90deg, var(--line-color-2) 1px, transparent 1px);
|
||||
background-position:
|
||||
-1.5px -1.5px,
|
||||
-1.5px -1.5px,
|
||||
-1px -1px,
|
||||
-1px -1px;
|
||||
background-size:
|
||||
100px 100px,
|
||||
100px 100px,
|
||||
20px 20px,
|
||||
20px 20px;
|
||||
|
||||
box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.1);
|
||||
align-self: center;
|
||||
`;
|
||||
|
||||
export const UpgradeModal = ({ opened, onClose }: ModalProps) => {
|
||||
return (
|
||||
<Modal
|
||||
title={
|
||||
<Flex align="center" gap="8">
|
||||
<ThemeIcon variant="transparent">
|
||||
<Image src="https://todiagram.com/logo.svg" alt="ToDiagram" width={24} height={24} />
|
||||
<Image src="https://todiagram.com/logo.svg" alt="ToDiagram" width={20} height={20} />
|
||||
</ThemeIcon>
|
||||
<Text fz="h2" fw={600}>
|
||||
<Text fz="24" fw={600}>
|
||||
Get more with ToDiagram
|
||||
</Text>
|
||||
</Flex>
|
||||
@ -34,59 +48,59 @@ export const UpgradeModal = ({ opened, onClose }: ModalProps) => {
|
||||
onClose={onClose}
|
||||
zIndex={1001}
|
||||
centered
|
||||
radius="lg"
|
||||
>
|
||||
<Flex align="center">
|
||||
<Box flex="0.6">
|
||||
<Text fz="sm" mb="sm">
|
||||
<Flex align="start">
|
||||
<Box px="lg" pb="lg">
|
||||
<Text fz="sm" mb="md">
|
||||
More productivity. More power. Our most-requested features are now available on a
|
||||
refined platform.
|
||||
</Text>
|
||||
<Text fz="sm" fw={500} mb="sm">
|
||||
<Text fz="md" fw={500} mb="sm">
|
||||
Here's what you get with ToDiagram:
|
||||
</Text>
|
||||
<List spacing="6" fz="sm" icon={<IoMdCheckmarkCircleOutline size="24" color="#16a34a" />}>
|
||||
<List.Item>
|
||||
Larger data support up to{" "}
|
||||
<Text component="span" inherit fw={600}>
|
||||
4 MB
|
||||
</Text>
|
||||
</List.Item>
|
||||
<List.Item>Edit data directly on visualizations</List.Item>
|
||||
<List.Item>Compare data differences on graphs</List.Item>
|
||||
<List.Item>AI-powered data filter</List.Item>
|
||||
<List.Item>Customizable graph colors</List.Item>
|
||||
<List.Item>Tabs for multiple documents</List.Item>
|
||||
<List.Item>...faster, and more</List.Item>
|
||||
<List spacing="6" fz="md" icon={<IoMdCheckmarkCircleOutline size="24" color="#16a34a" />}>
|
||||
<List.Item>Load up to 4 MB data</List.Item>
|
||||
<List.Item>Edit data on diagrams</List.Item>
|
||||
<List.Item>Compare data</List.Item>
|
||||
<List.Item>AI-Powered filter</List.Item>
|
||||
<List.Item>Customizable theme</List.Item>
|
||||
<List.Item>Editor tabs</List.Item>
|
||||
<List.Item>5X Faster loading</List.Item>
|
||||
<List.Item>Store 200 Documents</List.Item>
|
||||
</List>
|
||||
<Link href="https://todiagram.com" target="_blank" passHref rel="noopener">
|
||||
<Button
|
||||
color="green"
|
||||
fullWidth
|
||||
mt="md"
|
||||
size="md"
|
||||
fw={500}
|
||||
radius="md"
|
||||
rightSection={<MdChevronRight size="24" />}
|
||||
>
|
||||
Get Started
|
||||
</Button>
|
||||
</Link>
|
||||
</Box>
|
||||
<Divider orientation="vertical" mx="md" />
|
||||
<Box flex="1">
|
||||
<AspectRatio ratio={16 / 9}>
|
||||
<video
|
||||
autoPlay
|
||||
height="auto"
|
||||
muted
|
||||
loop
|
||||
playsInline
|
||||
style={{ display: "block", borderRadius: "8px", border: "2px solid #e9e9e9" }}
|
||||
>
|
||||
<source src="https://todiagram.com/videos/diagrams.mp4" type="video/mp4" />
|
||||
</video>
|
||||
</AspectRatio>
|
||||
<Text fz="md" my="sm">
|
||||
<Text component="span" inherit fw={500}>
|
||||
Cancel anytime.
|
||||
</Text>{" "}
|
||||
Pay monthly or annually.
|
||||
</Text>
|
||||
<Button
|
||||
component="a"
|
||||
href="https://todiagram.com?utm_source=app&utm_medium=upgrade_modal"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
color="green"
|
||||
fullWidth
|
||||
mt="md"
|
||||
size="md"
|
||||
fw={500}
|
||||
radius="md"
|
||||
rightSection={<MdChevronRight size="24" />}
|
||||
>
|
||||
Get Started
|
||||
</Button>
|
||||
</Box>
|
||||
<StyledPaper ml="md" withBorder p="16">
|
||||
<Image
|
||||
miw="420"
|
||||
mih="420"
|
||||
mah="500"
|
||||
src="/assets/todiagram_img.webp"
|
||||
alt="ToDiagram"
|
||||
fit="contain"
|
||||
/>
|
||||
</StyledPaper>
|
||||
</Flex>
|
||||
</Modal>
|
||||
);
|
||||
|
@ -5,11 +5,13 @@ import { useMantineColorScheme } from "@mantine/core";
|
||||
import "@mantine/dropzone/styles.css";
|
||||
import styled, { ThemeProvider } from "styled-components";
|
||||
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
|
||||
import Cookie from "js-cookie";
|
||||
import { NextSeo } from "next-seo";
|
||||
import { SEO } from "src/constants/seo";
|
||||
import { darkTheme, lightTheme } from "src/constants/theme";
|
||||
import { Editor } from "src/containers/Editor";
|
||||
import { BottomBar } from "src/containers/Editor/components/BottomBar";
|
||||
import { UpgradeModal } from "src/containers/Modals";
|
||||
import { Toolbar } from "src/containers/Toolbar";
|
||||
import useConfig from "src/store/useConfig";
|
||||
import useFile from "src/store/useFile";
|
||||
@ -46,6 +48,12 @@ const EditorPage = () => {
|
||||
const { setColorScheme } = useMantineColorScheme();
|
||||
const checkEditorSession = useFile(state => state.checkEditorSession);
|
||||
const darkmodeEnabled = useConfig(state => state.darkmodeEnabled);
|
||||
const [upgradeVisible, setUpgradeVisible] = React.useState(false);
|
||||
|
||||
React.useEffect(() => {
|
||||
const isUpgradeShown = Cookie.get("upgrade_shown");
|
||||
if (!isUpgradeShown) setUpgradeVisible(true);
|
||||
}, []);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (isReady) checkEditorSession(query?.json);
|
||||
@ -67,6 +75,13 @@ const EditorPage = () => {
|
||||
<QueryClientProvider client={queryClient}>
|
||||
<ExternalMode />
|
||||
<ModalController />
|
||||
<UpgradeModal
|
||||
opened={upgradeVisible}
|
||||
onClose={() => {
|
||||
setUpgradeVisible(false);
|
||||
Cookie.set("upgrade_shown", "true", { expires: 1 });
|
||||
}}
|
||||
/>
|
||||
<StyledEditorWrapper>
|
||||
<StyledPageWrapper>
|
||||
<Toolbar />
|
||||
|
Loading…
x
Reference in New Issue
Block a user