refactor code

README.md

@@ -25,7 +25,7 @@
   </p>
 
   <p align="center">
-      <img width="800" src="https://jsonvisio.com/jsonvisio-screenshot.png" alt="preview 1" />
+      <img width="800" src="https://jsonvisio.com/jsonvisio-screenshot.webp" alt="preview 1" />
   </p>
 
 

src/components/CarbonAds/index.tsx

@@ -36,7 +36,7 @@ export const CarbonAds: React.FC<{ editor?: boolean }> = ({
     <StyledWrapper editor={editor} id="carbon-wrapper">
       <Script
         type="text/javascript"
-        src="//cdn.carbonads.com/carbon.js?serve=CE7IPKQL&placement=jsonvisiocom"
+        src="https://cdn.carbonads.com/carbon.js?serve=CE7IPKQL&placement=jsonvisiocom"
         id="_carbonads_js"
         strategy="lazyOnload"
         onLoad={() => {

src/containers/Editor/Panes.tsx

@@ -1,9 +1,16 @@
 import { Allotment } from "allotment";
 import React from "react";
 import { JsonEditor } from "src/containers/Editor/JsonEditor";
-import { StyledEditor } from "./styles";
 import dynamic from "next/dynamic";
 import useConfig from "src/hooks/store/useConfig";
+import styled from "styled-components";
+import "allotment/dist/style.css";
+
+export const StyledEditor = styled(Allotment)`
+  position: relative !important;
+  display: flex;
+  background: ${({ theme }) => theme.BACKGROUND_SECONDARY};
+`;
 
 const LiveEditor = dynamic(() => import("src/containers/Editor/LiveEditor"), {
   ssr: false,

src/containers/Editor/index.tsx

@@ -1,19 +0,0 @@
-import React from "react";
-import { Sidebar } from "src/components/Sidebar";
-import { Incompatible } from "src/containers/Incompatible";
-import * as Styles from "src/containers/Editor/styles";
-import Panes from "./Panes";
-
-const Editor: React.FC = () => {
-  return (
-    <Styles.StyledPageWrapper>
-      <Sidebar />
-      <Styles.StyledEditorWrapper>
-        <Panes />
-      </Styles.StyledEditorWrapper>
-      <Incompatible />
-    </Styles.StyledPageWrapper>
-  );
-};
-
-export default Editor;

src/containers/Editor/styles.tsx

@@ -1,23 +0,0 @@
-import styled from "styled-components";
-import { Allotment } from "allotment";
-import "allotment/dist/style.css";
-
-export const StyledPageWrapper = styled.div`
-  display: flex;
-  height: 100vh;
-`;
-
-export const StyledEditorWrapper = styled.div`
-  width: 100%;
-  overflow: hidden;
-
-  @media only screen and (max-width: 568px) {
-    display: none;
-  }
-`;
-
-export const StyledEditor = styled(Allotment)`
-  position: relative !important;
-  display: flex;
-  background: ${({ theme }) => theme.BACKGROUND_SECONDARY};
-`;

src/pages/Editor/index.tsx

@@ -1,9 +1,23 @@
 import React from "react";
 import Head from "next/head";
-import Editor from "src/containers/Editor";
 import styled from "styled-components";
+import Panes from "src/containers/Editor/Panes";
+import { Sidebar } from "src/components/Sidebar";
+import { Incompatible } from "src/containers/Incompatible";
 
-const StyledEditorWrapper = styled.div``;
+export const StyledPageWrapper = styled.div`
+  display: flex;
+  height: 100vh;
+`;
+
+export const StyledEditorWrapper = styled.div`
+  width: 100%;
+  overflow: hidden;
+
+  @media only screen and (max-width: 568px) {
+    display: none;
+  }
+`;
 
 const EditorPage: React.FC = () => {
   return (
@@ -15,7 +29,13 @@ const EditorPage: React.FC = () => {
           content="View your JSON data in graphs instantly."
         />
       </Head>
-      <Editor />
+      <StyledPageWrapper>
+        <Sidebar />
+        <StyledEditorWrapper>
+          <Panes />
+        </StyledEditorWrapper>
+        <Incompatible />
+      </StyledPageWrapper>
     </StyledEditorWrapper>
   );
 };

src/containers/Home/index.tsx → src/pages/Home/index.tsx

@@ -12,10 +12,10 @@ import {
 } from "react-icons/hi";
 import { Producthunt } from "src/components/Producthunt";
 import { CarbonAds } from "src/components/CarbonAds";
+import { Sponsors } from "src/components/Sponsors";
+import { GoalsModal } from "src/containers/Modals/GoalsModal";
 import pkg from "../../../package.json";
 import * as Styles from "./styles";
-import { GoalsModal } from "../Modals/GoalsModal";
-import { Sponsors } from "src/components/Sponsors";
 
 const Home: React.FC = () => {
   const { push } = useRouter();
@@ -70,7 +70,7 @@ const Home: React.FC = () => {
         {!isMobile && (
           <>
             <Styles.StyledSponsorButton onClick={() => setModalVisible(true)}>
-              Help JSON Visio Accomplish It's Goals
+              Help JSON Visio Accomplish It&apos;s Goals
               <FaHeart />
             </Styles.StyledSponsorButton>
             <GoalsModal visible={isModalVisible} setVisible={setModalVisible} />
@@ -79,12 +79,14 @@ const Home: React.FC = () => {
       </Styles.StyledHeroSection>
 
       <Styles.StyledPreviewSection>
-        <Styles.StyledImage
-          width="1200"
-          height="auto"
-          src="/jsonvisio-screenshot.png"
-          alt="preview"
-        />
+        <Styles.StyledImageWrapper>
+          <Styles.StyledImage
+            width="1200"
+            height="863"
+            src="/jsonvisio-screenshot.webp"
+            alt="preview"
+          />
+        </Styles.StyledImageWrapper>
       </Styles.StyledPreviewSection>
 
       <Styles.StyledFeaturesSection id="features">

src/containers/Home/styles.tsx → src/pages/Home/styles.tsx

@@ -1,6 +1,14 @@
 import { Button } from "src/components/Button";
 import styled from "styled-components";
 
+export const StyledImageWrapper = styled.div`
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
 export const StyledHome = styled.div`
   display: flex;
   flex-direction: column;
@@ -272,7 +280,9 @@ export const StyledPreviewSection = styled.section`
 `;
 
 export const StyledImage = styled.img`
-  max-width: 100%;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
   filter: drop-shadow(0px 0px 12px rgba(255, 255, 255, 0.6));
 `;
 

src/pages/index.tsx

@@ -1,8 +1,8 @@
 import React from "react";
-import Home from "src/containers/Home";
+import Home from "./Home";
 
-const LandingPage: React.FC = () => {
+const HomePage = () => {
   return <Home />;
 };
 
-export default LandingPage;
+export default HomePage;