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)