Adding devtools to make it easier to create snippets

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

@@ -0,0 +1,109 @@
+import { useEffect, useState } from 'react';
+import useEscapeKey from '../../hooks/useEscapeKey';
+import { createPortal } from 'react-dom';
+import { DevToolsField } from './DevToolsField';
+import CodePreview from '../CodePreview';
+
+export interface DevToolsProps {
+    closeModal: () => void,
+}
+
+export const DevTools = ({ closeModal }: DevToolsProps) => {
+    const modalRoot = document.getElementById("modal-root");
+    if (!modalRoot) return null;
+    useEscapeKey(closeModal);
+
+    const [ title, setTitle ] = useState('');
+    const [ description, setDescription ] = useState('');
+    const [ tags, setTags ] = useState('');
+    const [ author, setAuthor ] = useState('');
+    const [ code, setCode ] = useState('');
+
+    const [ generated, setGenerated ] = useState('');
+
+    const generateSnippet = () => {
+        const codeArray = code.split(/\r?\n/gm);
+
+        const tagsArray = tags
+            .split(',')
+            .map((tag) => tag.trim())
+            .filter((tag) => tag);
+
+        return {
+            title: title.trim(),
+            description: description.trim(),
+            tags: tagsArray,
+            author: author.trim(),
+            code: codeArray,
+        };
+    };
+
+    useEffect(() => {
+        setGenerated(JSON.stringify(generateSnippet(), null, 4));
+    }, [
+        title, description, tags, author, code,
+    ]);
+
+    return createPortal(
+        <div
+            className='modal-overlay devtools'
+            onClick={ (e) => {
+                if(e.target === e.currentTarget) {
+                    closeModal()
+                }
+            } }
+        >
+            <div className='modal devtools-container'>
+                <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='json' code={[generated]} height='80vh' />
+                </div>
+            </div>
+        </div>,
+        modalRoot
+    );
+}

src/components/devtools/DevToolsField.tsx

@@ -0,0 +1,27 @@
+
+export interface DevToolsFieldProps {
+    name: string,
+    key: string,
+    value: string,
+    placeholder?: string,
+    setValue: (value: string) => void,
+}
+
+export const DevToolsField = ({
+    name, key, value, placeholder, setValue
+}: DevToolsFieldProps) => {
+    return (
+        <div className='devtools-field'>
+            <label htmlFor={key} className='devtools-label'>{name}</label>
+            <input
+                type="text"
+                name={key}
+                id={key}
+                className='devtools-input'
+                placeholder={placeholder ? placeholder : ''}
+                value={value}
+                onChange={(e) => setValue(e.target.value)}
+            />
+        </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/Footer.tsx

@@ -1,4 +1,9 @@
+import { useState } from 'react';
+import { DevTools } from '../components/devtools/DevTools';
+
 const Footer = () => {
+  const [ devToolsOpenned, setDevToolsOpenned ] = useState(false);
+
   return (
     <>
       <hr className="divider" />
@@ -37,6 +42,21 @@ const Footer = () => {
                 Add your own snippet
               </a>
             </li>
+            <li>
+              <button
+                onClick={() => setDevToolsOpenned((c) => !c)}
+                className="styled-button"
+              >
+                Open the snippet DevTools
+              </button>
+              {
+                devToolsOpenned ? (
+                  <DevTools
+                    closeModal={() => setDevToolsOpenned(false)}
+                  />
+                ) : null
+              }
+            </li>
             <li>
               <a
                 href="https://github.com/dostonnabotov/quicksnip"

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>
   );