Skip to content

Commit e407ce7

Browse files
psychlone77psychlone77
committed
Added the button to the top right corner which opens the Devtools during development. Also made some UI changes.
1 parent 9ec7c68 commit e407ce7

File tree

6 files changed

+134
-61
lines changed

6 files changed

+134
-61
lines changed

‎src/components/CodePreview.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,10 @@ import CopyToClipboard from "./CopyToClipboard";
55
type Props = {
66
language: string;
77
code: string[];
8+
height?: string;
89
};
910

10-
const CodePreview = ({ language = "markdown", code }: Props) => {
11+
const CodePreview = ({ language = "markdown", code, height }: Props) => {
1112
const codeString = code.join("\n");
1213

1314
return (
@@ -17,7 +18,7 @@ const CodePreview = ({ language = "markdown", code }: Props) => {
1718
language={language}
1819
style={oneDark}
1920
wrapLines={true}
20-
customStyle={{ margin: "0", maxHeight: "20rem" }}
21+
customStyle={{ margin: "0", maxHeight: height ? height : "20rem" }}
2122
>
2223
{codeString}
2324
</SyntaxHighlighter>

‎src/components/Icons.tsx

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -168,3 +168,28 @@ export const LeftAngleArrowIcon = ({ fillColor = ACCENT_ICON_COLOR }) => (
168168
</defs>
169169
</svg>
170170
);
171+
172+
export const ToolsIcon = ({ fillColor = DEFAULT_ICON_COLOR }) => (
173+
<svg
174+
width="20px"
175+
height="20px"
176+
viewBox="0 0 32 32"
177+
version="1.1"
178+
xmlns="http://www.w3.org/2000/svg"
179+
>
180+
<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
181+
<g
182+
id="SVGRepo_tracerCarrier"
183+
stroke-linecap="round"
184+
stroke-linejoin="round"
185+
></g>
186+
<g id="SVGRepo_iconCarrier">
187+
<g id="icomoon-ignore"> </g>
188+
<path
189+
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"
190+
fill={fillColor}
191+
>
192+
</path>
193+
</g>
194+
</svg>
195+
);

‎src/components/devtools/DevTools.tsx

Lines changed: 44 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -54,50 +54,53 @@ export const DevTools = ({ closeModal }: DevToolsProps) => {
5454
} }
5555
>
5656
<div className='modal devtools-container'>
57-
<div className='devtools-sub-container'>
58-
<DevToolsField
59-
key='title'
60-
name='Title'
61-
value={title}
62-
placeholder='e.g., Hello World!'
63-
setValue={(value) => setTitle(value)}
64-
/>
65-
<DevToolsField
66-
key='author'
67-
name='Author'
68-
value={author}
69-
placeholder='e.g., dostonnabotov'
70-
setValue={(value) => setAuthor(value)}
71-
/>
72-
</div>
73-
<DevToolsField
74-
key='description'
75-
name='Description'
76-
value={description}
77-
placeholder='e.g., A simple program that prints "Hello, World!" to the console.'
78-
setValue={(value) => setDescription(value)}
79-
/>
80-
<DevToolsField
81-
key='tags'
82-
name='Tags (separated by commas)'
83-
value={tags}
84-
placeholder='e.g., hello, world, program'
85-
setValue={(value) => setTags(value)}
86-
/>
87-
<div className='devtools-field'>
88-
<label htmlFor="code" className='devtools-label'>Code</label>
89-
<textarea
90-
name='code'
91-
id='code'
92-
className='devtools-textarea'
93-
value={code}
94-
placeholder='Paste your code here...'
95-
onChange={(e) => setCode(e.target.value)}
96-
></textarea>
57+
<div className='devtools-form-container'>
58+
<div className='devtools-sub-container'>
59+
<DevToolsField
60+
key='title'
61+
name='Title'
62+
value={title}
63+
placeholder='e.g., Hello World!'
64+
setValue={(value) => setTitle(value)}
65+
/>
66+
<DevToolsField
67+
key='author'
68+
name='Author'
69+
value={author}
70+
placeholder='e.g., dostonnabotov'
71+
setValue={(value) => setAuthor(value)}
72+
/>
73+
</div>
74+
<DevToolsField
75+
key='description'
76+
name='Description'
77+
value={description}
78+
placeholder='e.g., A simple program that prints "Hello, World!" to the console.'
79+
setValue={(value) => setDescription(value)}
80+
/>
81+
<DevToolsField
82+
key='tags'
83+
name='Tags (separated by commas)'
84+
value={tags}
85+
placeholder='e.g., hello, world, program'
86+
setValue={(value) => setTags(value)}
87+
/>
88+
<div className='devtools-field'>
89+
<label htmlFor="code" className='devtools-label'>Code</label>
90+
<textarea
91+
name='code'
92+
id='code'
93+
className='devtools-textarea'
94+
value={code}
95+
placeholder='Paste your code here...'
96+
spellCheck={false}
97+
onChange={(e) => setCode(e.target.value)}
98+
></textarea>
99+
</div>
97100
</div>
98101
<div className='devtools-generated-container'>
99102
<h3 className='devtools-generated-title'>Your generated snippet:</h3>
100-
<CodePreview language='plaintext' code={[generated]} />
103+
<CodePreview language='json' code={[generated]} height='80vh' />
101104
</div>
102105
</div>
103106
</div>,

‎src/components/devtools/DevtoolsButton.tsx

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import { useState } from "react";
2+
import { ToolsIcon } from "../Icons";
3+
import { DevTools } from "./DevTools";
4+
5+
export const DevtoolsButton = () => {
6+
const [devToolsOpenned, setDevToolsOpenned] = useState(false);
7+
return (
8+
<>
9+
<button className="button" onClick={() => setDevToolsOpenned((c) => !c)}>
10+
<ToolsIcon />
11+
<span>Open Snippet Devtools</span>
12+
</button>
13+
{devToolsOpenned ? (
14+
<DevTools closeModal={() => setDevToolsOpenned(false)} />
15+
) : null}
16+
</>
17+
);
18+
};

‎src/layouts/Header.tsx

Lines changed: 13 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import LinkButton from "../components/LinkButton";
33
import Logo from "../components/Logo";
44
import SearchInput from "../components/SearchInput";
55
import ThemeToggle from "../components/ThemeToggle";
6+
import { DevtoolsButton } from "../components/devtools/DevtoolsButton";
67

78
const Header = () => {
89
return (
@@ -11,14 +12,18 @@ const Header = () => {
1112
<nav className="primary-nav">
1213
<SearchInput />
1314
<ThemeToggle />
14-
<LinkButton
15-
href="https://github.com/dostonnabotov/quicksnip/blob/main/CONTRIBUTING.md"
16-
target="_blank"
17-
rel="noopener noreferrer"
18-
>
19-
<GitHubIcon />
20-
<span>Add your snippet</span>
21-
</LinkButton>
15+
{import.meta.env.MODE === "development" ? (
16+
<DevtoolsButton />
17+
) : (
18+
<LinkButton
19+
href="https://github.com/dostonnabotov/quicksnip/blob/main/CONTRIBUTING.md"
20+
target="_blank"
21+
rel="noopener noreferrer"
22+
>
23+
<GitHubIcon />
24+
<span>Add your snippet</span>
25+
</LinkButton>
26+
)}
2227
</nav>
2328
</header>
2429
);

‎src/styles/main.css

Lines changed: 31 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -678,6 +678,17 @@ body:has(.modal-overlay) {
678678
\*------------------------------------*/
679679

680680
.devtools-container {
681+
display: flex;
682+
flex-direction: row;
683+
background-color: var(--bg-primary);
684+
gap: 1em;
685+
max-height: 95vh;
686+
max-width: 95vw;
687+
overflow-y: auto;
688+
}
689+
690+
.devtools-form-container {
691+
width: 50%;
681692
display: flex;
682693
flex-direction: column;
683694
background-color: var(--bg-primary);
@@ -692,13 +703,6 @@ body:has(.modal-overlay) {
692703
gap: 1em;
693704
}
694705

695-
@media screen and (max-width: 768px) {
696-
.devtools-sub-container {
697-
flex-direction: column;
698-
}
699-
700-
}
701-
702706
.devtools-field {
703707
width: 100%;
704708
display: flex;
@@ -728,20 +732,22 @@ body:has(.modal-overlay) {
728732
resize: none;
729733
background: none;
730734
outline: none;
731-
735+
font-family: var(--ff-mono);
736+
color: var(--text-secondary);
732737
height: 25vh;
733738
border: 1px solid var(--clr-neutral-500);
734739
border-radius: 0.5em;
735740
padding: 0.5em;
741+
resize: vertical;
736742
}
737743

738744
.devtools-generated-container {
739-
margin-top: 1.5em;
745+
width: 50%;
740746
}
741747

742748
.devtools-generated-title {
743749
color: var(--text-primary);
744-
margin-bottom: 0.1em;
750+
margin-bottom: 0.2em;
745751
text-decoration: none;
746752
font-size: var(--fs-600);
747753
font-weight: 600;
@@ -760,3 +766,18 @@ body:has(.modal-overlay) {
760766
white-space: pre-wrap;
761767
word-wrap: break-word;
762768
}
769+
770+
@media screen and (max-width: 1024px) {
771+
.devtools-container {
772+
flex-direction: column;
773+
}
774+
.devtools-sub-container {
775+
flex-direction: column;
776+
}
777+
.devtools-form-container {
778+
width: 100%;
779+
}
780+
.devtools-generated-container {
781+
width: 100%;
782+
}
783+
}

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy