add tools to widget

package.json

@@ -1,7 +1,7 @@
 {
   "name": "json-crack",
   "private": true,
-  "version": "v2.5.1",
+  "version": "v2.6.0",
   "author": "https://github.com/AykutSarac",
   "homepage": "https://jsoncrack.com",
   "scripts": {

src/components/SearchInput/index.tsx

@@ -56,8 +56,6 @@ const StyledSearchButton = styled.button`
 export const SearchInput: React.FC = () => {
   const [content, setContent, skip] = useFocusNode();
 
-  console.log(content);
-
   const onSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     skip();

src/containers/Editor/LiveEditor/Tools.tsx

@@ -7,7 +7,7 @@ import useGraph from "src/store/useGraph";
 import useModal from "src/store/useModal";
 import styled from "styled-components";
 
-export const StyledTools = styled.div`
+export const StyledTools = styled.div<{ isWidget: boolean }>`
   position: relative;
   display: flex;
   align-items: center;
@@ -21,12 +21,12 @@ export const StyledTools = styled.div`
   z-index: 1;
 
   @media only screen and (max-width: 768px) {
-    display: none;
+    display: ${({ isWidget }) => !isWidget && "none"};
   }
 `;
 
-const StyledToolElement = styled.button`
-  display: grid;
+const StyledToolElement = styled.button<{ hide?: boolean }>`
+  display: ${({ hide }) => hide ? "none" : "grid"};
   place-content: center;
   font-size: 20px;
   background: none;
@@ -45,7 +45,7 @@ const StyledToolElement = styled.button`
   }
 `;
 
-export const Tools: React.FC = () => {
+export const Tools: React.FC<{ isWidget?: boolean }> = ({ isWidget = false }) => {
   const setVisible = useModal(state => state.setVisible);
 
   const fullscreen = useGraph(state => state.fullscreen);
@@ -58,8 +58,8 @@ export const Tools: React.FC = () => {
 
   return (
     <>
-      <StyledTools>
-        <StyledToolElement aria-label="fullscreen" onClick={toggleEditor}>
+      <StyledTools isWidget={isWidget}>
+        <StyledToolElement aria-label="fullscreen" hide={isWidget} onClick={toggleEditor}>
           <AiOutlineFullscreen />
         </StyledToolElement>
         <SearchInput />

src/containers/Modals/DownloadModal/index.tsx

@@ -7,7 +7,6 @@ import { FiCopy, FiDownload } from "react-icons/fi";
 import { Button } from "src/components/Button";
 import { Input } from "src/components/Input";
 import { Modal, ModalProps } from "src/components/Modal";
-import useGraph from "src/store/useGraph";
 import styled from "styled-components";
 
 const ColorPickerStyles: Partial<TwitterPickerStylesProps> = {
@@ -93,7 +92,6 @@ const StyledColorIndicator = styled.div<{ color: string }>`
 `;
 
 export const DownloadModal: React.FC<ModalProps> = ({ visible, setVisible }) => {
-  const togglePerfMode = useGraph(state => state.togglePerfMode);
   const [fileDetails, setFileDetails] = React.useState({
     filename: "jsoncrack.com",
     backgroundColor: "transparent",
@@ -103,7 +101,6 @@ export const DownloadModal: React.FC<ModalProps> = ({ visible, setVisible }) =>
   const clipboardImage = async () => {
     try {
       toast.loading("Copying to clipboard...", { id: "toastClipboard" });
-      togglePerfMode(false);
 
       const imageElement = document.querySelector("svg[id*='ref']") as HTMLElement;
 
@@ -126,14 +123,12 @@ export const DownloadModal: React.FC<ModalProps> = ({ visible, setVisible }) =>
     } finally {
       toast.dismiss("toastClipboard");
       setVisible(false);
-      togglePerfMode(true);
     }
   };
 
   const exportAsImage = async () => {
     try {
       toast.loading("Downloading...", { id: "toastDownload" });
-      togglePerfMode(false);
 
       const imageElement = document.querySelector("svg[id*='ref']") as HTMLElement;
 
@@ -148,7 +143,6 @@ export const DownloadModal: React.FC<ModalProps> = ({ visible, setVisible }) =>
     } finally {
       toast.dismiss("toastDownload");
       setVisible(false);
-      togglePerfMode(true);
     }
   };
 

src/pages/widget.tsx

@@ -7,6 +7,7 @@ import { darkTheme, lightTheme } from "src/constants/theme";
 import useGraph from "src/store/useGraph";
 import useJson from "src/store/useJson";
 import styled, { ThemeProvider } from "styled-components";
+import { Tools } from "src/containers/Editor/LiveEditor/Tools";
 
 const GraphCanvas = dynamic(
   () => import("src/containers/Editor/LiveEditor/GraphCanvas").then(c => c.GraphCanvas),
@@ -81,6 +82,7 @@ const WidgetPage = () => {
 
   return (
     <ThemeProvider theme={theme === "dark" ? darkTheme : lightTheme}>
+      <Tools isWidget />
       <GraphCanvas isWidget />
       <StyledAttribute href={`${baseURL}/editor`} target="_blank" rel="noreferrer">
         jsoncrack.com