implement pro version updates

src/components/Footer/index.tsx

@@ -1,7 +1,6 @@
 import Link from "next/link";
 import { FaDiscord, FaGithub, FaLinkedin, FaTwitter } from "react-icons/fa";
 import styled from "styled-components";
-import pkg from "../../../package.json";
 
 export const StyledFooter = styled.footer`
   display: flex;
@@ -47,7 +46,7 @@ export const Footer = () => (
         <img width="120" height="20" src="assets/icon.png" alt="icon" loading="lazy" />
       </Link>
       <span>
-        © {new Date().getFullYear()} JSON Crack - {pkg.version}
+        © {new Date().getFullYear()} JSON Crack
       </span>
     </StyledFooterText>
     <StyledIconLinks>

src/components/Navbar/index.tsx

@@ -0,0 +1,59 @@
+import React from "react";
+import Link from "next/link";
+import styled from "styled-components";
+
+const StyledNavbar = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 20px;
+  padding: 16px 48px;
+
+  @media only screen and (max-width: 768px) {
+    a:first-of-type {
+      display: none;
+    }
+  }
+`;
+
+const StyledLinkWrapper = styled.nav`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 20px;
+`;
+
+const StyledNavLink = styled(Link)`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 1rem;
+  cursor: pointer;
+  transition: color 0.2s;
+
+  &:hover {
+    font-weight: 500;
+    color: ${({ theme }) => theme.ORANGE};
+  }
+`;
+
+export const Navbar = () => (
+  <StyledNavbar>
+    <Link href="/">
+      <img src="assets/icon.png" alt="json crack" width="120" />
+    </Link>
+    <StyledLinkWrapper>
+      <StyledNavLink href="/editor">Editor</StyledNavLink>
+      <StyledNavLink href="#features">Features</StyledNavLink>
+      <StyledNavLink href="#sponsor">Sponsor</StyledNavLink>
+      <StyledNavLink
+        href="https://github.com/AykutSarac/jsoncrack.com"
+        target="_blank"
+        rel="external"
+      >
+        GitHub
+      </StyledNavLink>
+      <StyledNavLink href="docs">Documentation</StyledNavLink>
+    </StyledLinkWrapper>
+  </StyledNavbar>
+);

src/containers/Home/index.tsx

@@ -21,27 +21,12 @@ import { baseURL } from "src/constants/data";
 import { TABS } from "src/constants/previewSection";
 import { PricingCards } from "../PricingCards";
 import * as Styles from "./styles";
+import { Navbar } from "src/components/Navbar";
 
 const SyntaxHighlighter = dynamic(() => import("react-syntax-highlighter/dist/cjs/prism-async"), {
   ssr: false,
 });
 
-const Navbar = () => (
-  <Styles.StyledNavbar>
-    <Styles.StyledNavLink href="/editor">Editor</Styles.StyledNavLink>
-    <Styles.StyledNavLink href="#features">Features</Styles.StyledNavLink>
-    <Styles.StyledNavLink href="#sponsor">Sponsor</Styles.StyledNavLink>
-    <Styles.StyledNavLink
-      href="https://github.com/AykutSarac/jsoncrack.com"
-      target="_blank"
-      rel="external"
-    >
-      GitHub
-    </Styles.StyledNavLink>
-    <Styles.StyledNavLink href="docs">Documentation</Styles.StyledNavLink>
-  </Styles.StyledNavbar>
-);
-
 const HeroSection = () => (
   <Styles.StyledHeroSection id="main">
     <Styles.StyledTitle>

src/pages/_app.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import type { AppProps } from "next/app";
+import { useRouter } from "next/router";
 import localFont from "@next/font/local";
 import { init } from "@sentry/nextjs";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
@@ -9,6 +10,7 @@ import GlobalStyle from "src/constants/globalStyle";
 import { darkTheme, lightTheme } from "src/constants/theme";
 import { ModalController } from "src/containers/ModalController";
 import useStored from "src/store/useStored";
+import useUser from "src/store/useUser";
 import { ThemeProvider } from "styled-components";
 
 const monaSans = localFont({
@@ -35,14 +37,19 @@ const queryClient = new QueryClient({
 });
 
 function JsonCrack({ Component, pageProps }: AppProps) {
-  const [isReady, setReady] = React.useState(false);
+  const [isLoaded, setIsLoaded] = React.useState(false);
+  const { isReady } = useRouter();
   const lightmode = useStored(state => state.lightmode);
+  const checkSession = useUser(state => state.checkSession);
 
   React.useEffect(() => {
-    setReady(true);
-  }, []);
+    if (isReady) {
+      checkSession();
+    }
+    setIsLoaded(true);
+  }, [checkSession, isReady]);
 
-  if (isReady)
+  if (isLoaded)
     return (
       <QueryClientProvider client={queryClient}>
         <GoogleAnalytics />

src/pages/docs.tsx

@@ -2,8 +2,8 @@ import React from "react";
 import dynamic from "next/dynamic";
 import Head from "next/head";
 import materialDark from "react-syntax-highlighter/dist/cjs/styles/prism/material-dark";
-import { Button } from "src/components/Button";
 import { Footer } from "src/components/Footer";
+import { Navbar } from "src/components/Navbar";
 import styled from "styled-components";
 
 const SyntaxHighlighter = dynamic(() => import("react-syntax-highlighter/dist/cjs/prism-async"), {
@@ -58,14 +58,12 @@ const StyledHighlight = styled.span<{ link?: boolean; alert?: boolean }>`
 const Docs = () => {
   return (
     <>
+      <Navbar />
       <Head>
         <title>Creating JSON Crack Embed | JSON Crack</title>
         <meta name="description" content="Embedding JSON Crack tutorial into your websites." />
       </Head>
       <StyledPage>
-        <Button href="/" link status="SECONDARY">
-          &lt; Go Back
-        </Button>
         <h1>Documentation</h1>
         <StyledContent>
           <h2># Fetching from URL</h2>

src/pages/pricing.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { Button } from "src/components/Button";
 import { Footer } from "src/components/Footer";
+import { Navbar } from "src/components/Navbar";
 import { PricingCards } from "src/containers/PricingCards";
 import styled from "styled-components";
 
@@ -17,6 +18,7 @@ const StyledHeroSection = styled.section`
 const Pricing = () => {
   return (
     <>
+      <Navbar />
       <StyledPageWrapper>
         <Button href="/" link>
           &lt; Go Back

src/pages/sign-in.tsx

@@ -0,0 +1,70 @@
+import React from "react";
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { AiOutlineGithub, AiOutlineGoogle } from "react-icons/ai";
+import { altogic } from "src/api/altogic";
+import { Button } from "src/components/Button";
+import { Footer } from "src/components/Footer";
+import { Navbar } from "src/components/Navbar";
+import useUser from "src/store/useUser";
+import styled from "styled-components";
+
+const StyledPageWrapper = styled.div`
+  padding: 5%;
+`;
+
+const StyledHeroSection = styled.section`
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  align-items: center;
+`;
+
+const StyledLoginButtons = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  margin-top: 60px;
+  gap: 24px;
+`;
+
+const SignIn = () => {
+  const isPremium = useUser(state => state.isPremium());
+  const { replace } = useRouter();
+
+  React.useEffect(() => {
+    if (isPremium) replace("/editor");
+  }, [isPremium, replace]);
+
+  const handleLoginClick = () => {
+    altogic.auth.signInWithProvider("google");
+  };
+
+  return (
+    <>
+      <Navbar />
+      <StyledPageWrapper>
+        <StyledHeroSection>
+          <Link href="/">
+            <img src="assets/icon.png" alt="json crack" width="400" />
+          </Link>
+          <h1>Sign In</h1>
+        </StyledHeroSection>
+        <StyledLoginButtons>
+          <Button status="DANGER" onClick={handleLoginClick}>
+            <AiOutlineGoogle size={24} />
+            Login with Google
+          </Button>
+          <Button status="TERTIARY" disabled>
+            <AiOutlineGithub size={24} />
+            Login with GitHub
+          </Button>
+        </StyledLoginButtons>
+      </StyledPageWrapper>
+      <Footer />
+    </>
+  );
+};
+
+export default SignIn;

src/store/useUser.tsx

@@ -38,6 +38,7 @@ const useUser = create<UserStates & UserActions>()((set, get) => ({
     set({ user: response.user as any, isAuthenticated: true });
   },
   checkSession: async () => {
+    if (location.pathname === "/") return;
     const currentSession = altogic.auth.getSession();
 
     if (currentSession) {
@@ -53,6 +54,8 @@ const useUser = create<UserStates & UserActions>()((set, get) => ({
         set({ user: data.user as any, isAuthenticated: true });
       }
     }
+
+    if (get().isPremium()) location.replace(location.href.replace("://", "://pro."));
   },
 }));