diff --git a/package.json b/package.json index de31ebe..8c4d9f3 100644 --- a/package.json +++ b/package.json @@ -41,6 +41,7 @@ "react-zoom-pan-pinch": "^3.0.2", "reaflow": "^5.1.2", "styled-components": "^5.3.8", + "universal-cookie": "^4.0.4", "zustand": "^4.3.6" }, "devDependencies": { diff --git a/src/containers/Modals/HerowandModal/index.tsx b/src/containers/Modals/HerowandModal/index.tsx index c21aca2..f0286bd 100644 --- a/src/containers/Modals/HerowandModal/index.tsx +++ b/src/containers/Modals/HerowandModal/index.tsx @@ -1,51 +1,43 @@ import React from "react"; -import { Modal, Group, Button, MantineProvider, Image, Text, Paper } from "@mantine/core"; -import { useDebouncedState, useSessionStorage } from "@mantine/hooks"; - -export const HerowandModal = () => { - const [opened, setOpened] = useDebouncedState(false, 300); - const [isNewsVisible, setNewsVisible] = useSessionStorage({ - key: "news", - defaultValue: true, - getInitialValueInEffect: true, - }); - - React.useEffect(() => { - if (isNewsVisible) setOpened(true); - else setOpened(false); - }, [isNewsVisible, setOpened]); - - const onClose = () => { - setNewsVisible(false); - setOpened(false); - }; +import { + Modal, + Group, + Button, + MantineProvider, + Image, + Text, + Paper, + ModalProps, + Anchor, +} from "@mantine/core"; +export const HerowandModal: React.FC = ({ opened, onClose }) => { return ( - - herowand - + + + herowand + + Introducing you something new...
- Herowand Editor - the ultimate tool for visualizing, editing, and sharing data in graph - format. Import JSON, YAML, TOML, XML and manipulate data on the graph. Save to cloud, - share, download as image, search through graph, accessibility features. Try it now! + Now, you can visualize not only JSON but also other data formats. Explore Herowand Editor.
- diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index d483ebe..48e0f1c 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -6,6 +6,7 @@ import { MantineProvider } from "@mantine/core"; import { init } from "@sentry/nextjs"; import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; import { Toaster } from "react-hot-toast"; +import Cookie from "universal-cookie"; import { GoogleAnalytics } from "src/components/GoogleAnalytics"; import GlobalStyle from "src/constants/globalStyle"; import { darkTheme, lightTheme } from "src/constants/theme"; @@ -21,6 +22,9 @@ if (process.env.NODE_ENV !== "development") { }); } +const cookie = new Cookie(); +const newsCookie = cookie.get("news_seen"); + const queryClient = new QueryClient({ defaultOptions: { queries: { @@ -39,10 +43,20 @@ const monaSans = localFont({ function JsonCrack({ Component, pageProps }: AppProps) { const [isReady, setReady] = React.useState(false); + const [showNews, setShowNews] = React.useState(false); const lightmode = useStored(state => state.lightmode); React.useEffect(() => { setReady(true); + + if (typeof newsCookie === "undefined") { + setShowNews(true); + } else setShowNews(false); + }, []); + + const closeNews = React.useCallback(() => { + setShowNews(false); + cookie.set("news_seen", true, { path: "/", maxAge: 43200 }); }, []); if (isReady) @@ -51,7 +65,8 @@ function JsonCrack({ Component, pageProps }: AppProps) { - + {} +