Added the button to the top right corner which opens the Devtools during development. Also made some UI changes.

Author: psychlone77

src/components/CodePreview.tsx

@@ -5,9 +5,10 @@ import CopyToClipboard from "./CopyToClipboard";
 type Props = {
   language: string;
   code: string[];
+  height?: string;
 };
 
-const CodePreview = ({ language = "markdown", code }: Props) => {
+const CodePreview = ({ language = "markdown", code, height }: Props) => {
   const codeString = code.join("\n");
 
   return (
@@ -17,7 +18,7 @@ const CodePreview = ({ language = "markdown", code }: Props) => {
         language={language}
         style={oneDark}
         wrapLines={true}
-        customStyle={{ margin: "0", maxHeight: "20rem" }}
+        customStyle={{ margin: "0", maxHeight: height ? height : "20rem" }}
       >
         {codeString}
       </SyntaxHighlighter>

src/components/Icons.tsx

@@ -168,3 +168,28 @@ export const LeftAngleArrowIcon = ({ fillColor = ACCENT_ICON_COLOR }) => (
     </defs>
   </svg>
 );
+
+export const ToolsIcon = ({ fillColor = DEFAULT_ICON_COLOR }) => (
+  <svg
+    width="20px"
+    height="20px"
+    viewBox="0 0 32 32"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
+    <g
+      id="SVGRepo_tracerCarrier"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    ></g>
+    <g id="SVGRepo_iconCarrier">
+      <g id="icomoon-ignore"> </g>
+      <path
+        d="M29.532 25.76l-5.655-5.655 0.754-0.754-0.754-0.754-2.261 2.261-3.771-3.77 4.53-4.532c0.603 0.215 1.234 0.324 1.882 0.324 1.493 0 2.897-0.582 3.954-1.637 1.63-1.631 2.092-4.054 1.178-6.174l-0.311-0.722-2.43 2.43-1.956 0.027 0.026-1.866 2.477-2.477-0.72-0.312c-0.706-0.306-1.457-0.461-2.229-0.461-1.494 0-2.897 0.582-3.952 1.637-1.546 1.545-2.043 3.802-1.311 5.84l-4.529 4.529-6.409-6.408 0.754-0.754-4.145-4.146-2.264 2.261 4.147 4.147 0.753-0.754 6.409 6.408-4.529 4.529c-0.605-0.217-1.239-0.326-1.888-0.326-1.493 0-2.897 0.582-3.953 1.637-1.633 1.632-2.095 4.059-1.176 6.181l0.312 0.72 2.477-2.477 1.865-0.025-0.027 1.956-2.43 2.43 0.722 0.311c0.704 0.303 1.452 0.458 2.221 0.458 1.494 0 2.897-0.581 3.952-1.636 1.544-1.544 2.041-3.799 1.314-5.833l4.532-4.532 3.771 3.769-2.263 2.263 0.754 0.754 0.754-0.754 5.654 5.654c0.503 0.504 1.174 0.781 1.885 0.781s1.381-0.277 1.885-0.781c1.039-1.039 1.039-2.73-0-3.769zM3.899 4.648l0.754-0.753 2.638 2.638-0.754 0.754-2.639-2.639zM11.448 22.456c0.739 1.716 0.364 3.679-0.955 4.999-0.854 0.854-1.989 1.324-3.198 1.324-0.347 0-0.689-0.039-1.021-0.116l1.569-1.569 0.047-3.485-3.394 0.046-1.619 1.619c-0.356-1.51 0.081-3.103 1.208-4.229 0.854-0.854 1.99-1.325 3.199-1.325 0.626 0 1.233 0.125 1.806 0.373l0.333 0.144 10.819-10.819-0.144-0.333c-0.744-1.719-0.37-3.682 0.952-5.004 0.854-0.854 1.99-1.325 3.198-1.325 0.35 0 0.695 0.040 1.030 0.117l-1.618 1.618-0.047 3.394 3.485-0.047 1.57-1.57c0.352 1.507-0.086 3.097-1.209 4.221-0.855 0.854-1.991 1.325-3.2 1.325-0.624 0-1.23-0.125-1.801-0.371l-0.332-0.143-10.821 10.823 0.143 0.332zM28.779 28.775c-0.302 0.302-0.704 0.469-1.131 0.469s-0.829-0.167-1.131-0.469l-5.654-5.654 2.262-2.262 5.655 5.655c0.624 0.624 0.624 1.638 0.001 2.261z"
+        fill={fillColor}
+      >
+      </path>
+    </g>
+  </svg>
+);

src/components/devtools/DevTools.tsx

@@ -54,50 +54,53 @@ export const DevTools = ({ closeModal }: DevToolsProps) => {
             } }
         >
             <div className='modal devtools-container'>
-                <div className='devtools-sub-container'>
-                <DevToolsField
-                    key='title'
-                    name='Title'
-                    value={title}
-                    placeholder='e.g., Hello World!'
-                    setValue={(value) => setTitle(value)}
-                />
-                <DevToolsField
-                    key='author'
-                    name='Author'
-                    value={author}
-                    placeholder='e.g., dostonnabotov'
-                    setValue={(value) => setAuthor(value)}
-                />
-                </div>
-                <DevToolsField
-                    key='description'
-                    name='Description'
-                    value={description}
-                    placeholder='e.g., A simple program that prints "Hello, World!" to the console.'
-                    setValue={(value) => setDescription(value)}
-                />
-                <DevToolsField
-                    key='tags'
-                    name='Tags (separated by commas)'
-                    value={tags}
-                    placeholder='e.g., hello, world, program'
-                    setValue={(value) => setTags(value)}
-                />
-                <div className='devtools-field'>
-                    <label htmlFor="code" className='devtools-label'>Code</label>
-                    <textarea
-                        name='code'
-                        id='code'
-                        className='devtools-textarea'
-                        value={code}
-                        placeholder='Paste your code here...'
-                        onChange={(e) => setCode(e.target.value)}
-                    ></textarea>
+                <div className='devtools-form-container'>
+                    <div className='devtools-sub-container'>
+                        <DevToolsField
+                            key='title'
+                            name='Title'
+                            value={title}
+                            placeholder='e.g., Hello World!'
+                            setValue={(value) => setTitle(value)}
+                        />
+                        <DevToolsField
+                            key='author'
+                            name='Author'
+                            value={author}
+                            placeholder='e.g., dostonnabotov'
+                            setValue={(value) => setAuthor(value)}
+                        />
+                    </div>
+                    <DevToolsField
+                        key='description'
+                        name='Description'
+                        value={description}
+                        placeholder='e.g., A simple program that prints "Hello, World!" to the console.'
+                        setValue={(value) => setDescription(value)}
+                    />
+                    <DevToolsField
+                        key='tags'
+                        name='Tags (separated by commas)'
+                        value={tags}
+                        placeholder='e.g., hello, world, program'
+                        setValue={(value) => setTags(value)}
+                    />
+                    <div className='devtools-field'>
+                        <label htmlFor="code" className='devtools-label'>Code</label>
+                        <textarea
+                            name='code'
+                            id='code'
+                            className='devtools-textarea'
+                            value={code}
+                            placeholder='Paste your code here...'
+                            spellCheck={false}
+                            onChange={(e) => setCode(e.target.value)}
+                        ></textarea>
+                    </div>
                 </div>
                 <div className='devtools-generated-container'>
                     <h3 className='devtools-generated-title'>Your generated snippet:</h3>
-                    <CodePreview language='plaintext' code={[generated]} />
+                    <CodePreview language='json' code={[generated]} height='80vh' />
                 </div>
             </div>
         </div>,

src/components/devtools/DevtoolsButton.tsx

@@ -0,0 +1,18 @@
+import { useState } from "react";
+import { ToolsIcon } from "../Icons";
+import { DevTools } from "./DevTools";
+
+export const DevtoolsButton = () => {
+  const [devToolsOpenned, setDevToolsOpenned] = useState(false);
+  return (
+    <>
+      <button className="button" onClick={() => setDevToolsOpenned((c) => !c)}>
+        <ToolsIcon />
+        <span>Open Snippet Devtools</span>
+      </button>
+      {devToolsOpenned ? (
+        <DevTools closeModal={() => setDevToolsOpenned(false)} />
+      ) : null}
+    </>
+  );
+};

src/layouts/Header.tsx

@@ -3,6 +3,7 @@ import LinkButton from "../components/LinkButton";
 import Logo from "../components/Logo";
 import SearchInput from "../components/SearchInput";
 import ThemeToggle from "../components/ThemeToggle";
+import { DevtoolsButton } from "../components/devtools/DevtoolsButton";
 
 const Header = () => {
   return (
@@ -11,14 +12,18 @@ const Header = () => {
       <nav className="primary-nav">
         <SearchInput />
         <ThemeToggle />
-        <LinkButton
-          href="https://github.com/dostonnabotov/quicksnip/blob/main/CONTRIBUTING.md"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <GitHubIcon />
-          <span>Add your snippet</span>
-        </LinkButton>
+        {import.meta.env.MODE === "development" ? (
+          <DevtoolsButton />
+        ) : (
+          <LinkButton
+            href="https://github.com/dostonnabotov/quicksnip/blob/main/CONTRIBUTING.md"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <GitHubIcon />
+            <span>Add your snippet</span>
+          </LinkButton>
+        )}
       </nav>
     </header>
   );

src/styles/main.css

@@ -678,6 +678,17 @@ body:has(.modal-overlay) {
 \*------------------------------------*/
 
 .devtools-container {
+  display: flex;
+  flex-direction: row;
+  background-color: var(--bg-primary);
+  gap: 1em;
+  max-height: 95vh;
+  max-width: 95vw;
+  overflow-y: auto;
+}
+
+.devtools-form-container {
+  width: 50%;
   display: flex;
   flex-direction: column;
   background-color: var(--bg-primary);
@@ -692,13 +703,6 @@ body:has(.modal-overlay) {
   gap: 1em;
 }
 
-@media screen and (max-width: 768px) {
-  .devtools-sub-container {
-    flex-direction: column;
-  }
-  
-}
-
 .devtools-field {
   width: 100%;
   display: flex;
@@ -728,20 +732,22 @@ body:has(.modal-overlay) {
   resize: none;
   background: none;
   outline: none;
-
+  font-family: var(--ff-mono);
+  color: var(--text-secondary);
   height: 25vh;
   border: 1px solid var(--clr-neutral-500);
   border-radius: 0.5em;
   padding: 0.5em;
+  resize: vertical;
 }
 
 .devtools-generated-container {
-  margin-top: 1.5em;
+  width: 50%;
 }
 
 .devtools-generated-title {
   color: var(--text-primary);
-  margin-bottom: 0.1em;
+  margin-bottom: 0.2em;
   text-decoration: none;
   font-size: var(--fs-600);
   font-weight: 600;
@@ -760,3 +766,18 @@ body:has(.modal-overlay) {
   white-space: pre-wrap;
   word-wrap: break-word;
 }
+
+@media screen and (max-width: 1024px) {
+  .devtools-container {
+    flex-direction: column;
+  }
+  .devtools-sub-container {
+    flex-direction: column;
+  }
+  .devtools-form-container {
+    width: 100%;
+  }
+  .devtools-generated-container {
+    width: 100%;
+  }
+}