Made changes to the Devtools UI and components. Reused the CodePreview Component to display the generated snippet which already had the copy button as well.

Author: psychlone77

src/components/devtools/DevTools.tsx

@@ -2,6 +2,7 @@ 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,
@@ -53,47 +54,50 @@ 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)}
                 />
-                <DevToolsField
-                    key='author'
-                    name='Author'
-                    value={author}
-                    setValue={(value) => setAuthor(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>
                 <div className='devtools-generated-container'>
                     <h3 className='devtools-generated-title'>Your generated snippet:</h3>
-                    <pre className='devtools-generated'>
-                        <code>
-                            {generated}
-                        </code>
-                    </pre>
+                    <CodePreview language='plaintext' code={[generated]} />
                 </div>
             </div>
         </div>,

src/components/devtools/DevToolsField.tsx

@@ -3,11 +3,12 @@ export interface DevToolsFieldProps {
     name: string,
     key: string,
     value: string,
+    placeholder?: string,
     setValue: (value: string) => void,
 }
 
 export const DevToolsField = ({
-    name, key, value, setValue
+    name, key, value, placeholder, setValue
 }: DevToolsFieldProps) => {
     return (
         <div className='devtools-field'>
@@ -17,7 +18,7 @@ export const DevToolsField = ({
                 name={key}
                 id={key}
                 className='devtools-input'
-                placeholder={"..."}
+                placeholder={placeholder ? placeholder : ''}
                 value={value}
                 onChange={(e) => setValue(e.target.value)}
             />

src/styles/main.css

@@ -680,10 +680,27 @@ body:has(.modal-overlay) {
 .devtools-container {
   display: flex;
   flex-direction: column;
-  gap: 0.75em;
+  background-color: var(--bg-primary);
+  gap: 1em;
+}
+
+.devtools-sub-container{
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  gap: 1em;
+}
+
+@media screen and (max-width: 768px) {
+  .devtools-sub-container {
+    flex-direction: column;
+  }
+  
 }
 
 .devtools-field {
+  width: 100%;
   display: flex;
   flex-direction: column;
   gap: 0.1em;
@@ -694,16 +711,17 @@ body:has(.modal-overlay) {
   text-decoration: none;
   font-size: var(--fs-500);
   font-weight: 600;
+  margin-bottom: 0.1em;
 }
 
 .devtools-input {
   border: none;
   outline: none;
   background: none;
-
-  border-bottom: 1px solid white;
-
-  max-width: 50%;
+  padding: 0.5em;
+  border-radius: 0.5em;
+  border: 1px solid var(--clr-neutral-500);
+  flex-grow: 1;
 }
 
 .devtools-textarea {
@@ -712,7 +730,7 @@ body:has(.modal-overlay) {
   outline: none;
 
   height: 25vh;
-  border: 1px solid white;
+  border: 1px solid var(--clr-neutral-500);
   border-radius: 0.5em;
   padding: 0.5em;
 }
@@ -723,6 +741,7 @@ body:has(.modal-overlay) {
 
 .devtools-generated-title {
   color: var(--text-primary);
+  margin-bottom: 0.1em;
   text-decoration: none;
   font-size: var(--fs-600);
   font-weight: 600;
@@ -731,12 +750,12 @@ body:has(.modal-overlay) {
 .devtools-generated {
   max-width: 100%;
   max-height: 20vh;
-
+  background-color: var(--bg-secondary);
+  border-radius: 0.5em;
   overflow-y: auto;
 
   margin: 0.5em;
   padding: 0.5em;
-  border-left: 1px solid white;
 
   white-space: pre-wrap;
   word-wrap: break-word;