feat: create layout

src/components/Modal/index.tsx

@@ -18,6 +18,7 @@ type ModalTypes = {
 export interface ModalProps {
   visible: boolean;
   setVisible: React.Dispatch<React.SetStateAction<boolean>>;
+  size?: "md" | "lg";
 }
 
 const Header: ReactComponent = ({ children }) => {
@@ -51,6 +52,7 @@ const Modal: React.FC<React.PropsWithChildren<ModalProps>> & ModalTypes = ({
   children,
   visible,
   setVisible,
+  size = "md",
 }) => {
   const onClick = (e: React.SyntheticEvent<HTMLDivElement>) => {
     if (e.currentTarget === e.target) {
@@ -62,7 +64,7 @@ const Modal: React.FC<React.PropsWithChildren<ModalProps>> & ModalTypes = ({
 
   return (
     <Styled.ModalWrapper onClick={onClick}>
-      <Styled.ModalInnerWrapper>{children}</Styled.ModalInnerWrapper>
+      <Styled.ModalInnerWrapper size={size}>{children}</Styled.ModalInnerWrapper>
     </Styled.ModalWrapper>
   );
 };

src/components/Modal/styles.tsx

@@ -22,9 +22,9 @@ export const ModalWrapper = styled.div`
   }
 `;
 
-export const ModalInnerWrapper = styled.div`
+export const ModalInnerWrapper = styled.div<{ size: "md" | "lg" }>`
   min-width: 440px;
-  max-width: 490px;
+  max-width: ${({ size }) => (size === "md" ? "490px" : "90%")};
   width: fit-content;
   animation: ${appearAnimation} 220ms ease-in-out;
   line-height: 20px;
@@ -58,7 +58,7 @@ export const ControlsWrapper = styled.div`
   display: flex;
   flex-direction: row-reverse;
   background: ${({ theme }) => theme.BACKGROUND_SECONDARY};
-  padding: 16px;
+  padding: 12px;
   border-radius: 0 0 5px 5px;
   gap: 10px;
 `;

src/components/Sidebar/index.tsx

@@ -3,24 +3,27 @@ import Link from "next/link";
 import toast from "react-hot-toast";
 import {
   AiOutlineDelete,
-  AiFillGithub,
-  AiOutlineTwitter,
   AiOutlineSave,
   AiOutlineFileAdd,
-  AiOutlineLink,
   AiOutlineEdit,
 } from "react-icons/ai";
 import { CgArrowsMergeAltH, CgArrowsShrinkH } from "react-icons/cg";
 import { FiDownload } from "react-icons/fi";
-import { HiHeart } from "react-icons/hi";
 import { MdCenterFocusWeak } from "react-icons/md";
 import { TiFlowMerge } from "react-icons/ti";
-import { VscCollapseAll, VscExpandAll } from "react-icons/vsc";
+import {
+  VscAccount,
+  VscCloud,
+  VscCollapseAll,
+  VscExpandAll,
+  VscSettingsGear,
+} from "react-icons/vsc";
 import { Tooltip } from "src/components/Tooltip";
 import { ClearModal } from "src/containers/Modals/ClearModal";
+import { CloudModal } from "src/containers/Modals/CloudModal";
 import { DownloadModal } from "src/containers/Modals/DownloadModal";
 import { ImportModal } from "src/containers/Modals/ImportModal";
-import { ShareModal } from "src/containers/Modals/ShareModal";
+import { SettingsModal } from "src/containers/Modals/SettingsModal";
 import useConfig from "src/store/useConfig";
 import useGraph from "src/store/useGraph";
 import { getNextDirection } from "src/utils/getNextDirection";
@@ -48,7 +51,7 @@ const StyledElement = styled.button`
   display: flex;
   justify-content: center;
   text-align: center;
-  font-size: 26px;
+  font-size: 24px;
   font-weight: 600;
   width: fit-content;
   color: ${({ theme }) => theme.SIDEBAR_ICONS};
@@ -141,9 +144,10 @@ function rotateLayout(direction: "LEFT" | "RIGHT" | "DOWN" | "UP") {
 }
 
 export const Sidebar: React.FC = () => {
+  const [cloudmodalVisible, setCloudmodalVisible] = React.useState(false);
+  const [settingsVisible, setSettingsVisible] = React.useState(false);
   const [uploadVisible, setUploadVisible] = React.useState(false);
   const [clearVisible, setClearVisible] = React.useState(false);
-  const [shareVisible, setShareVisible] = React.useState(false);
   const [isDownloadVisible, setDownloadVisible] = React.useState(false);
 
   const getJson = useConfig(state => state.getJson);
@@ -198,26 +202,31 @@ export const Sidebar: React.FC = () => {
             <StyledText secondary>C</StyledText>
           </StyledElement>
         </Link>
+
         <Tooltip className="mobile" title="Edit JSON">
           <StyledElement onClick={() => setConfig("hideEditor", !hideEditor)}>
             <AiOutlineEdit />
           </StyledElement>
         </Tooltip>
+
         <Tooltip title="Import File">
           <StyledElement onClick={() => setUploadVisible(true)}>
             <AiOutlineFileAdd />
           </StyledElement>
         </Tooltip>
+
         <Tooltip title="Rotate Layout">
           <StyledElement onClick={toggleDirection}>
             <StyledFlowIcon rotate={rotateLayout(direction)} />
           </StyledElement>
         </Tooltip>
+
         <Tooltip className="mobile" title="Center View">
           <StyledElement onClick={centerView}>
             <MdCenterFocusWeak />
           </StyledElement>
         </Tooltip>
+
         <Tooltip
           className="desktop"
           title={foldNodes ? "Unfold Nodes" : "Fold Nodes"}
@@ -226,6 +235,7 @@ export const Sidebar: React.FC = () => {
             {foldNodes ? <CgArrowsShrinkH /> : <CgArrowsMergeAltH />}
           </StyledElement>
         </Tooltip>
+
         <Tooltip
           className="desktop"
           title={graphCollapsed ? "Expand Graph" : "Collapse Graph"}
@@ -234,54 +244,48 @@ export const Sidebar: React.FC = () => {
             {graphCollapsed ? <VscExpandAll /> : <VscCollapseAll />}
           </StyledElement>
         </Tooltip>
-        <Tooltip className="desktop" title="Save JSON">
+
+        <Tooltip className="desktop" title="Download JSON">
           <StyledElement onClick={handleSave}>
             <AiOutlineSave />
           </StyledElement>
         </Tooltip>
+
         <Tooltip className="mobile" title="Download Image">
           <StyledElement onClick={() => setDownloadVisible(true)}>
             <FiDownload />
           </StyledElement>
         </Tooltip>
+
         <Tooltip title="Clear JSON">
           <StyledElement onClick={() => setClearVisible(true)}>
             <AiOutlineDelete />
           </StyledElement>
         </Tooltip>
-        <Tooltip className="desktop" title="Share">
-          <StyledElement onClick={() => setShareVisible(true)}>
-            <AiOutlineLink />
+
+        <Tooltip className="desktop" title="View Saved JSON">
+          <StyledElement onClick={() => setCloudmodalVisible(true)}>
+            <VscCloud />
           </StyledElement>
         </Tooltip>
       </StyledTopWrapper>
       <StyledBottomWrapper>
-        <StyledElement>
-          <Link href="https://twitter.com/jsoncrack">
-            <a aria-label="Twitter" rel="me" target="_blank">
-              <AiOutlineTwitter />
-            </a>
-          </Link>
-        </StyledElement>
-        <StyledElement>
-          <Link href="https://github.com/AykutSarac/jsoncrack.com">
-            <a aria-label="GitHub" rel="me" target="_blank">
-              <AiFillGithub />
-            </a>
-          </Link>
-        </StyledElement>
-        <StyledElement>
-          <Link href="https://github.com/sponsors/AykutSarac">
-            <a aria-label="GitHub Sponsors" rel="me" target="_blank">
-              <HiHeart />
-            </a>
-          </Link>
-        </StyledElement>
+        <Tooltip title="Account">
+          <StyledElement>
+            <VscAccount />
+          </StyledElement>
+        </Tooltip>
+        <Tooltip title="Setings">
+          <StyledElement onClick={() => setSettingsVisible(true)}>
+            <VscSettingsGear />
+          </StyledElement>
+        </Tooltip>
       </StyledBottomWrapper>
       <ImportModal visible={uploadVisible} setVisible={setUploadVisible} />
       <ClearModal visible={clearVisible} setVisible={setClearVisible} />
-      <ShareModal visible={shareVisible} setVisible={setShareVisible} />
       <DownloadModal visible={isDownloadVisible} setVisible={setDownloadVisible} />
+      <SettingsModal visible={settingsVisible} setVisible={setSettingsVisible} />
+      <CloudModal visible={cloudmodalVisible} setVisible={setCloudmodalVisible} />
     </StyledSidebar>
   );
 };

src/containers/Editor/BottomBar.tsx

@@ -0,0 +1,85 @@
+import React from "react";
+import {
+  AiOutlineCloudUpload,
+  AiOutlineLink,
+  AiOutlineUnlock,
+} from "react-icons/ai";
+import { VscAccount, VscHeart } from "react-icons/vsc";
+import styled from "styled-components";
+import { ShareModal } from "../Modals/ShareModal";
+
+const StyledBottomBar = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-top: 1px solid ${({ theme }) => theme.BACKGROUND_MODIFIER_ACCENT};
+  background: ${({ theme }) => theme.BACKGROUND_TERTIARY};
+  max-height: 28px;
+  height: 28px;
+  padding: 0 6px;
+`;
+
+const StyledLeft = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: left;
+  gap: 4px;
+`;
+
+const StyledRight = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: right;
+  gap: 4px;
+`;
+
+const StyledBottomBarItem = styled.button`
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  width: fit-content;
+  margin: 0;
+  height: 28px;
+  padding: 4px;
+  font-size: 12px;
+  color: ${({ theme }) => theme.INTERACTIVE_NORMAL};
+
+  &:hover {
+    background-image: linear-gradient(rgba(0, 0, 0, 0.1) 0 0);
+    color: ${({ theme }) => theme.INTERACTIVE_HOVER};
+  }
+`;
+
+export const BottomBar = () => {
+  const [shareVisible, setShareVisible] = React.useState(false);
+
+  return (
+    <StyledBottomBar>
+      <StyledLeft>
+        <StyledBottomBarItem>
+          <VscAccount />
+          Aykut Saraç
+        </StyledBottomBarItem>
+        <StyledBottomBarItem>
+          <AiOutlineCloudUpload />
+          Unsaved Changes
+        </StyledBottomBarItem>
+        <StyledBottomBarItem>
+          <AiOutlineUnlock />
+          Public
+        </StyledBottomBarItem>
+        <StyledBottomBarItem onClick={() => setShareVisible(true)}>
+          <AiOutlineLink />
+          Share
+        </StyledBottomBarItem>
+      </StyledLeft>
+      <StyledRight>
+        <StyledBottomBarItem>
+          <VscHeart />
+          Support JSON Crack
+        </StyledBottomBarItem>
+      </StyledRight>
+      <ShareModal visible={shareVisible} setVisible={setShareVisible} />
+    </StyledBottomBar>
+  );
+};

src/containers/Editor/Tools.tsx

@@ -2,9 +2,7 @@ import React from "react";
 import { AiOutlineFullscreen, AiOutlineMinus, AiOutlinePlus } from "react-icons/ai";
 import { FiDownload } from "react-icons/fi";
 import { MdCenterFocusWeak } from "react-icons/md";
-import { TbSettings } from "react-icons/tb";
 import { SearchInput } from "src/components/SearchInput";
-import { SettingsModal } from "src/containers/Modals/SettingsModal";
 import useConfig from "src/store/useConfig";
 import styled from "styled-components";
 import { DownloadModal } from "../Modals/DownloadModal";
@@ -48,7 +46,6 @@ const StyledToolElement = styled.button`
 `;
 
 export const Tools: React.FC = () => {
-  const [settingsVisible, setSettingsVisible] = React.useState(false);
   const [isDownloadVisible, setDownloadVisible] = React.useState(false);
 
   const hideEditor = useConfig(state => state.hideEditor);
@@ -65,12 +62,6 @@ export const Tools: React.FC = () => {
         <StyledToolElement aria-label="fullscreen" onClick={toggleEditor}>
           <AiOutlineFullscreen />
         </StyledToolElement>
-        <StyledToolElement
-          aria-label="settings"
-          onClick={() => setSettingsVisible(true)}
-        >
-          <TbSettings />
-        </StyledToolElement>
         <SearchInput />
         <StyledToolElement
           aria-label="save"
@@ -89,7 +80,6 @@ export const Tools: React.FC = () => {
         </StyledToolElement>
       </StyledTools>
       <DownloadModal visible={isDownloadVisible} setVisible={setDownloadVisible} />
-      <SettingsModal visible={settingsVisible} setVisible={setSettingsVisible} />
     </>
   );
 };

src/containers/Home/index.tsx

@@ -13,6 +13,7 @@ import { SiVisualstudiocode } from "react-icons/si";
 import { CarbonAds } from "src/components/CarbonAds";
 import { Producthunt } from "src/components/Producthunt";
 import { Sponsors } from "src/components/Sponsors";
+import { SupportButton } from "src/components/SupportButton";
 import { defaultJson } from "src/constants/data";
 import { GoalsModal } from "src/containers/Modals/GoalsModal";
 import pkg from "../../../package.json";
@@ -301,6 +302,7 @@ const Home: React.FC = () => {
       <SupportSection />
       <SponsorSection />
       <Footer />
+      <SupportButton />
     </Styles.StyledHome>
   );
 };

src/containers/Modals/ClearModal/index.tsx

@@ -1,5 +1,4 @@
 import React from "react";
-import toast from "react-hot-toast";
 import { Button } from "src/components/Button";
 import { Modal, ModalProps } from "src/components/Modal";
 import useConfig from "src/store/useConfig";
@@ -9,7 +8,6 @@ export const ClearModal: React.FC<ModalProps> = ({ visible, setVisible }) => {
 
   const handleClear = () => {
     setJson("{}");
-    toast.success(`Cleared JSON and removed from memory.`);
     setVisible(false);
   };
 

src/containers/Modals/CloudModal/index.tsx

@@ -0,0 +1,355 @@
+import React from "react";
+import { AiOutlinePlus } from "react-icons/ai";
+import { Modal, ModalProps } from "src/components/Modal";
+import styled from "styled-components";
+
+const StyledModalContent = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 14px;
+  height: 70vh;
+  overflow: auto;
+`;
+
+const StyledJsonCard = styled.a`
+  display: block;
+  background: ${({ theme }) => theme.BLACK_SECONDARY};
+  border: 2px solid ${({ theme }) => theme.BLACK_SECONDARY};
+  border-radius: 5px;
+  overflow: hidden;
+  min-width: 200px;
+  max-width: 250px;
+  flex: 1;
+  height: 160px;
+`;
+
+const StyledImg = styled.img`
+  width: 100%;
+  height: 100px;
+  object-fit: cover;
+`;
+
+const StyledInfo = styled.div`
+  padding: 4px 6px;
+`;
+
+const StyledTitle = styled.div`
+  font-size: 14px;
+`;
+
+const StyledDetils = styled.div`
+  font-size: 12px;
+`;
+
+const StyledModal = styled(Modal)`
+  #modal-view {
+    display: none;
+  }
+`;
+
+interface GraphCardProsp {
+  id?: string;
+  title: string;
+  preview: string;
+  details: string;
+}
+
+const GraphCard: React.FC<{ data: GraphCardProsp }> = ({
+  data: { id = "#", details, preview, title },
+}) => (
+  <StyledJsonCard href={`?id=${id}`}>
+    <StyledImg width="200" height="100" src={preview}></StyledImg>
+    <StyledInfo>
+      <StyledTitle>{title}</StyledTitle>
+      <StyledDetils>{details}</StyledDetils>
+    </StyledInfo>
+  </StyledJsonCard>
+);
+
+const StyledCreateWrapper = styled.div`
+  display: flex;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+  opacity: 0.6;
+  cursor: pointer;
+`;
+
+const CreateCard: React.FC = () => (
+  <StyledJsonCard href="/editor">
+    <StyledCreateWrapper>
+      <AiOutlinePlus size="30" />
+    </StyledCreateWrapper>
+  </StyledJsonCard>
+);
+
+export const CloudModal: React.FC<ModalProps> = ({ visible, setVisible }) => {
+  return (
+    <StyledModal size="lg" visible={visible} setVisible={setVisible}>
+      <Modal.Header>Saved On The Cloud</Modal.Header>
+      <Modal.Content>
+        <StyledModalContent>
+          <GraphCard
+            data={{
+              id: "ffuds9fds97",
+              title: "Virtual Metric DB",
+              details: "3 days ago",
+              preview:
+                "https://blog.shevarezo.fr/uploads/posts/bulk/FNj3yQLp_visualiser-donnees-json-diagramme-json-crack_rotate3.png",
+            }}
+          />
+          <GraphCard
+            data={{
+              title: "Virtual Metric DB",
+              details: "3 days ago",
+              preview:
+                "https://blog.shevarezo.fr/uploads/posts/bulk/FNj3yQLp_visualiser-donnees-json-diagramme-json-crack_rotate3.png",
+            }}
+          />
+          <GraphCard
+            data={{
+              title: "Virtual Metric DB",
+              details: "3 days ago",
+              preview:
+                "https://blog.shevarezo.fr/uploads/posts/bulk/FNj3yQLp_visualiser-donnees-json-diagramme-json-crack_rotate3.png",
+            }}
+          />
+          <GraphCard
+            data={{
+              title: "Virtual Metric DB",
+              details: "3 days ago",
+              preview:
+                "https://blog.shevarezo.fr/uploads/posts/bulk/FNj3yQLp_visualiser-donnees-json-diagramme-json-crack_rotate3.png",
+            }}
+          />
+          <GraphCard
+            data={{
+              title: "Virtual Metric DB",
+              details: "3 days ago",
+              preview:
+                "https://blog.shevarezo.fr/uploads/posts/bulk/FNj3yQLp_visualiser-donnees-json-diagramme-json-crack_rotate3.png",
+            }}
+          />
+          <GraphCard
+            data={{
+              title: "Virtual Metric DB",
+              details: "3 days ago",
+              preview:
+                "https://blog.shevarezo.fr/uploads/posts/bulk/FNj3yQLp_visualiser-donnees-json-diagramme-json-crack_rotate3.png",
+            }}
+          />
+          <GraphCard
+            data={{
+              title: "Virtual Metric DB",
+              details: "3 days ago",
+              preview:
+                "https://blog.shevarezo.fr/uploads/posts/bulk/FNj3yQLp_visualiser-donnees-json-diagramme-json-crack_rotate3.png",
+            }}
+          />
+          <GraphCard
+            data={{
+              title: "Virtual Metric DB",
+              details: "3 days ago",
+              preview:
+                "https://blog.shevarezo.fr/uploads/posts/bulk/FNj3yQLp_visualiser-donnees-json-diagramme-json-crack_rotate3.png",
+            }}
+          />
+          <GraphCard
+            data={{
+              title: "Virtual Metric DB",
+              details: "3 days ago",
+              preview:
+                "https://blog.shevarezo.fr/uploads/posts/bulk/FNj3yQLp_visualiser-donnees-json-diagramme-json-crack_rotate3.png",
+            }}
+          />
+          <GraphCard
+            data={{
+              title: "Virtual Metric DB",
+              details: "3 days ago",
+              preview:
+                "https://blog.shevarezo.fr/uploads/posts/bulk/FNj3yQLp_visualiser-donnees-json-diagramme-json-crack_rotate3.png",
+            }}
+          />
+          <GraphCard
+            data={{
+              title: "Virtual Metric DB",
+              details: "3 days ago",
+              preview:
+                "https://blog.shevarezo.fr/uploads/posts/bulk/FNj3yQLp_visualiser-donnees-json-diagramme-json-crack_rotate3.png",
+            }}
+          />
+          <GraphCard
+            data={{
+              title: "Virtual Metric DB",
+              details: "3 days ago",
+              preview:
+                "https://blog.shevarezo.fr/uploads/posts/bulk/FNj3yQLp_visualiser-donnees-json-diagramme-json-crack_rotate3.png",
+            }}
+          />
+          <GraphCard
+            data={{
+              title: "Virtual Metric DB",
+              details: "3 days ago",
+              preview:
+                "https://blog.shevarezo.fr/uploads/posts/bulk/FNj3yQLp_visualiser-donnees-json-diagramme-json-crack_rotate3.png",
+            }}
+          />
+          <GraphCard
+            data={{
+              title: "Virtual Metric DB",
+              details: "3 days ago",
+              preview:
+                "https://blog.shevarezo.fr/uploads/posts/bulk/FNj3yQLp_visualiser-donnees-json-diagramme-json-crack_rotate3.png",
+            }}
+          />
+          <GraphCard
+            data={{
+              title: "Virtual Metric DB",
+              details: "3 days ago",
+              preview:
+                "https://blog.shevarezo.fr/uploads/posts/bulk/FNj3yQLp_visualiser-donnees-json-diagramme-json-crack_rotate3.png",
+            }}
+          />
+          <GraphCard
+            data={{
+              title: "Virtual Metric DB",
+              details: "3 days ago",
+              preview:
+                "https://blog.shevarezo.fr/uploads/posts/bulk/FNj3yQLp_visualiser-donnees-json-diagramme-json-crack_rotate3.png",
+            }}
+          />
+          <GraphCard
+            data={{
+              title: "Virtual Metric DB",
+              details: "3 days ago",
+              preview:
+                "https://blog.shevarezo.fr/uploads/posts/bulk/FNj3yQLp_visualiser-donnees-json-diagramme-json-crack_rotate3.png",
+            }}
+          />
+          <GraphCard
+            data={{
+              title: "Virtual Metric DB",
+              details: "3 days ago",
+              preview:
+                "https://blog.shevarezo.fr/uploads/posts/bulk/FNj3yQLp_visualiser-donnees-json-diagramme-json-crack_rotate3.png",
+            }}
+          />
+          <GraphCard
+            data={{
+              title: "Virtual Metric DB",
+              details: "3 days ago",
+              preview:
+                "https://blog.shevarezo.fr/uploads/posts/bulk/FNj3yQLp_visualiser-donnees-json-diagramme-json-crack_rotate3.png",
+            }}
+          />
+          <GraphCard
+            data={{
+              title: "Virtual Metric DB",
+              details: "3 days ago",
+              preview:
+                "https://blog.shevarezo.fr/uploads/posts/bulk/FNj3yQLp_visualiser-donnees-json-diagramme-json-crack_rotate3.png",
+            }}
+          />
+          <GraphCard
+            data={{
+              title: "Virtual Metric DB",
+              details: "3 days ago",
+              preview:
+                "https://blog.shevarezo.fr/uploads/posts/bulk/FNj3yQLp_visualiser-donnees-json-diagramme-json-crack_rotate3.png",
+            }}
+          />
+          <GraphCard
+            data={{
+              title: "Virtual Metric DB",
+              details: "3 days ago",
+              preview:
+                "https://blog.shevarezo.fr/uploads/posts/bulk/FNj3yQLp_visualiser-donnees-json-diagramme-json-crack_rotate3.png",
+            }}
+          />
+          <GraphCard
+            data={{
+              title: "Virtual Metric DB",
+              details: "3 days ago",
+              preview:
+                "https://blog.shevarezo.fr/uploads/posts/bulk/FNj3yQLp_visualiser-donnees-json-diagramme-json-crack_rotate3.png",
+            }}
+          />
+          <GraphCard
+            data={{
+              title: "Virtual Metric DB",
+              details: "3 days ago",
+              preview:
+                "https://blog.shevarezo.fr/uploads/posts/bulk/FNj3yQLp_visualiser-donnees-json-diagramme-json-crack_rotate3.png",
+            }}
+          />
+          <GraphCard
+            data={{
+              title: "Virtual Metric DB",
+              details: "3 days ago",
+              preview:
+                "https://blog.shevarezo.fr/uploads/posts/bulk/FNj3yQLp_visualiser-donnees-json-diagramme-json-crack_rotate3.png",
+            }}
+          />
+          <GraphCard
+            data={{
+              title: "Virtual Metric DB",
+              details: "3 days ago",
+              preview:
+                "https://blog.shevarezo.fr/uploads/posts/bulk/FNj3yQLp_visualiser-donnees-json-diagramme-json-crack_rotate3.png",
+            }}
+          />
+          <GraphCard
+            data={{
+              title: "Virtual Metric DB",
+              details: "3 days ago",
+              preview:
+                "https://blog.shevarezo.fr/uploads/posts/bulk/FNj3yQLp_visualiser-donnees-json-diagramme-json-crack_rotate3.png",
+            }}
+          />
+          <GraphCard
+            data={{
+              title: "Virtual Metric DB",
+              details: "3 days ago",
+              preview:
+                "https://blog.shevarezo.fr/uploads/posts/bulk/FNj3yQLp_visualiser-donnees-json-diagramme-json-crack_rotate3.png",
+            }}
+          />
+          <GraphCard
+            data={{
+              title: "Virtual Metric DB",
+              details: "3 days ago",
+              preview:
+                "https://blog.shevarezo.fr/uploads/posts/bulk/FNj3yQLp_visualiser-donnees-json-diagramme-json-crack_rotate3.png",
+            }}
+          />
+          <GraphCard
+            data={{
+              title: "Virtual Metric DB",
+              details: "3 days ago",
+              preview:
+                "https://blog.shevarezo.fr/uploads/posts/bulk/FNj3yQLp_visualiser-donnees-json-diagramme-json-crack_rotate3.png",
+            }}
+          />
+          <GraphCard
+            data={{
+              title: "Virtual Metric DB",
+              details: "3 days ago",
+              preview:
+                "https://blog.shevarezo.fr/uploads/posts/bulk/FNj3yQLp_visualiser-donnees-json-diagramme-json-crack_rotate3.png",
+            }}
+          />
+          <GraphCard
+            data={{
+              title: "Virtual Metric DB",
+              details: "3 days ago",
+              preview:
+                "https://blog.shevarezo.fr/uploads/posts/bulk/FNj3yQLp_visualiser-donnees-json-diagramme-json-crack_rotate3.png",
+            }}
+          />
+          <CreateCard />
+        </StyledModalContent>
+      </Modal.Content>
+      <Modal.Controls setVisible={setVisible}></Modal.Controls>
+    </StyledModal>
+  );
+};

src/pages/Editor/index.tsx

@@ -1,13 +1,14 @@
 import React from "react";
 import Head from "next/head";
 import { Sidebar } from "src/components/Sidebar";
+import { BottomBar } from "src/containers/Editor/BottomBar";
 import Panes from "src/containers/Editor/Panes";
 import styled from "styled-components";
 
 export const StyledPageWrapper = styled.div`
   display: flex;
   flex-direction: row;
-  height: 100vh;
+  height: calc(100vh - 28px);
   width: 100%;
 
   @media only screen and (max-width: 768px) {
@@ -39,6 +40,7 @@ const EditorPage: React.FC = () => {
           <Panes />
         </StyledEditorWrapper>
       </StyledPageWrapper>
+      <BottomBar />
     </StyledEditorWrapper>
   );
 };

src/pages/_app.tsx

@@ -5,7 +5,6 @@ import { init } from "@sentry/nextjs";
 import { decompress } from "compress-json";
 import { Toaster } from "react-hot-toast";
 import { GoogleAnalytics } from "src/components/GoogleAnalytics";
-import { SupportButton } from "src/components/SupportButton";
 import GlobalStyle from "src/constants/globalStyle";
 import { darkTheme, lightTheme } from "src/constants/theme";
 import useConfig from "src/store/useConfig";
@@ -55,9 +54,11 @@ function JsonCrack({ Component, pageProps }: AppProps) {
           <GlobalStyle />
           <Component {...pageProps} />
           <Toaster
-            position="bottom-right"
+            position="top-right"
             containerStyle={{
-              right: 60,
+              top: 40,
+              right: 6,
+              fontSize: 14
             }}
             toastOptions={{
               style: {
@@ -66,7 +67,6 @@ function JsonCrack({ Component, pageProps }: AppProps) {
               },
             }}
           />
-          <SupportButton />
         </ThemeProvider>
       </>
     );