Skip to content

Commit c8acbbc

Browse files
whes1015whes1015
committed
fix: component
1 parent aa7ac11 commit c8acbbc

File tree

3 files changed

+155
-17
lines changed

3 files changed

+155
-17
lines changed

‎docs/api/api/index.mdx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,9 @@ import ApiEndpoint from "@site/src/components/ApiEndpoint";
1313
<ApiEndpoint
1414
method="GET"
1515
baseUrls={[
16-
{ name: "Production", url: "https://api.exptech.dev/api" },
17-
{ name: "Staging", url: "https://staging-api.exptech.dev/api" },
16+
{ name: "Auto", url: "https://api.exptech.dev/api" },
17+
{ name: "API-1", url: "https://api-1.exptech.dev/api" },
18+
{ name: "API-2", url: "https://api-2.exptech.dev/api" },
1819
]}
1920
endpoint="/v1/report"
2021
params={[

‎src/components/ApiEndpoint/index.tsx‎

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,16 @@
11
import { JSX, useState } from "react";
22
import styles from "./styles.module.css";
33

4+
const highlightJSON = (jsonString: string) => {
5+
return jsonString
6+
.replace(/("[\w\s]*")\s*:/g, '<span class="json-key">$1</span>:')
7+
.replace(/:\s*(".*?")/g, ': <span class="json-string">$1</span>')
8+
.replace(/:\s*(\d+)/g, ': <span class="json-number">$1</span>')
9+
.replace(/:\s*(true|false)/g, ': <span class="json-boolean">$1</span>')
10+
.replace(/:\s*(null)/g, ': <span class="json-null">$1</span>')
11+
.replace(/(\[|\]|\{|\})/g, '<span class="json-bracket">$1</span>');
12+
};
13+
414
type ApiEndpointProps = {
515
method?: "GET" | "POST" | "PUT" | "DELETE" | "PATCH";
616
baseUrls: Array<{
@@ -136,7 +146,11 @@ export default function ApiEndpoint({
136146
</select>
137147
</div>
138148
<pre className={styles.codeBlock}>
139-
<code>{JSON.stringify(responses[selectedStatus]?.data, null, 2)}</code>
149+
<code
150+
dangerouslySetInnerHTML={{
151+
__html: highlightJSON(JSON.stringify(responses[selectedStatus]?.data, null, 2))
152+
}}
153+
/>
140154
</pre>
141155
</div>
142156
)}

‎src/components/ApiEndpoint/styles.module.css‎

Lines changed: 137 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -84,20 +84,20 @@
8484

8585
.baseUrlSelect {
8686
padding: 0.375rem 0.75rem;
87-
background: white;
87+
background: var(--ifm-background-color);
8888
border: 2px solid var(--ifm-color-primary-lighter);
8989
border-radius: 8px;
9090
font-size: 0.875rem;
9191
font-weight: 500;
92-
color: var(--ifm-color-emphasis-800);
92+
color: var(--ifm-font-color-base);
9393
cursor: pointer;
9494
outline: none;
9595
transition: all 0.2s;
9696
flex-shrink: 0;
9797
}
9898

9999
.baseUrlSelect:hover {
100-
background: var(--ifm-color-primary-lightest);
100+
background: var(--ifm-color-emphasis-100);
101101
border-color: var(--ifm-color-primary);
102102
}
103103

@@ -106,6 +106,17 @@
106106
box-shadow: 0 0 0 3px var(--ifm-color-primary-lightest);
107107
}
108108

109+
[data-theme='dark'] .baseUrlSelect {
110+
background: var(--ifm-background-surface-color);
111+
border-color: var(--ifm-color-emphasis-400);
112+
color: var(--ifm-font-color-base);
113+
}
114+
115+
[data-theme='dark'] .baseUrlSelect:hover {
116+
background: var(--ifm-color-emphasis-200);
117+
border-color: var(--ifm-color-primary);
118+
}
119+
109120
@media (max-width: 768px) {
110121
.baseUrlSelect {
111122
width: 100%;
@@ -116,7 +127,7 @@
116127
.url {
117128
flex: 1;
118129
padding: 0.625rem 1rem;
119-
background: white;
130+
background: var(--ifm-background-color);
120131
border: 1px solid var(--ifm-color-emphasis-200);
121132
border-radius: 8px;
122133
font-family: var(--ifm-font-family-monospace);
@@ -127,6 +138,11 @@
127138
scrollbar-width: thin;
128139
}
129140

141+
[data-theme='dark'] .url {
142+
background: var(--ifm-background-surface-color);
143+
border-color: var(--ifm-color-emphasis-400);
144+
}
145+
130146
.url::-webkit-scrollbar {
131147
height: 4px;
132148
}
@@ -141,6 +157,14 @@
141157
border-radius: 2px;
142158
}
143159

160+
[data-theme='dark'] .url::-webkit-scrollbar-track {
161+
background: var(--ifm-color-emphasis-300);
162+
}
163+
164+
[data-theme='dark'] .url::-webkit-scrollbar-thumb {
165+
background: var(--ifm-color-emphasis-600);
166+
}
167+
144168
@media (max-width: 768px) {
145169
.url {
146170
font-size: 0.75rem;
@@ -286,11 +310,19 @@
286310

287311
.paramType {
288312
padding: 0.2rem 0.5rem;
289-
background: linear-gradient(135deg, var(--ifm-color-info-lighter) 0%, var(--ifm-color-info-light) 100%);
313+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
290314
color: white;
291315
border-radius: 12px;
292316
font-size: 0.75rem;
293-
font-weight: 600;
317+
font-weight: 700;
318+
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
319+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
320+
}
321+
322+
[data-theme='dark'] .paramType {
323+
background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
324+
color: white;
325+
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
294326
}
295327

296328
.optional {
@@ -364,6 +396,73 @@
364396
padding-top: 1rem;
365397
}
366398

399+
/* JSON Syntax Highlighting */
400+
.codeBlock :global(.json-key) {
401+
color: #9cdcfe;
402+
font-weight: 500;
403+
}
404+
405+
.codeBlock :global(.json-string) {
406+
color: #ce9178;
407+
}
408+
409+
.codeBlock :global(.json-number) {
410+
color: #b5cea8;
411+
font-weight: 600;
412+
}
413+
414+
.codeBlock :global(.json-boolean) {
415+
color: #569cd6;
416+
font-weight: 600;
417+
}
418+
419+
.codeBlock :global(.json-null) {
420+
color: #569cd6;
421+
font-style: italic;
422+
}
423+
424+
.codeBlock :global(.json-bracket) {
425+
color: #ffd700;
426+
font-weight: 700;
427+
}
428+
429+
/* Light mode JSON highlighting */
430+
[data-theme='light'] .codeBlock {
431+
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
432+
}
433+
434+
[data-theme='light'] .codeBlock code {
435+
color: #2d3748;
436+
}
437+
438+
[data-theme='light'] .codeBlock :global(.json-key) {
439+
color: #0070f3;
440+
}
441+
442+
[data-theme='light'] .codeBlock :global(.json-string) {
443+
color: #22863a;
444+
}
445+
446+
[data-theme='light'] .codeBlock :global(.json-number) {
447+
color: #e36209;
448+
font-weight: 600;
449+
}
450+
451+
[data-theme='light'] .codeBlock :global(.json-boolean) {
452+
color: #6f42c1;
453+
font-weight: 600;
454+
}
455+
456+
[data-theme='light'] .codeBlock :global(.json-null) {
457+
color: #6f42c1;
458+
font-style: italic;
459+
}
460+
461+
[data-theme='light'] .codeBlock :global(.json-bracket) {
462+
color: #d73a49;
463+
font-weight: 700;
464+
}
465+
367466
@media (max-width: 768px) {
368467
.codeBlock {
369468
padding: 1rem;
@@ -394,27 +493,39 @@
394493
.statusSelect {
395494
padding: 0.5rem 1rem;
396495
padding-right: 2.5rem;
397-
background: white;
496+
background-color: var(--ifm-background-color);
497+
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
498+
background-repeat: no-repeat;
499+
background-position: right 0.75rem center;
500+
background-size: 1rem;
398501
border: 2px solid var(--ifm-color-emphasis-300);
399502
border-radius: 8px;
400503
font-size: 0.875rem;
401504
font-weight: 600;
505+
color: var(--ifm-font-color-base);
402506
cursor: pointer;
403507
outline: none;
404508
transition: all 0.2s;
405509
appearance: none;
406-
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
407-
background-repeat: no-repeat;
408-
background-position: right 0.75rem center;
409-
background-size: 1rem;
410510
min-width: 150px;
411511
}
412512

513+
[data-theme='dark'] .statusSelect {
514+
background-color: var(--ifm-background-surface-color);
515+
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ccc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
516+
border-color: var(--ifm-color-emphasis-400);
517+
color: var(--ifm-font-color-base);
518+
}
519+
413520
.statusSelect:hover {
414521
background-color: var(--ifm-color-emphasis-50);
415522
border-color: var(--ifm-color-emphasis-400);
416523
}
417524

525+
[data-theme='dark'] .statusSelect:hover {
526+
background-color: var(--ifm-color-emphasis-200);
527+
}
528+
418529
.statusSelect:focus {
419530
border-color: var(--ifm-color-primary);
420531
box-shadow: 0 0 0 3px var(--ifm-color-primary-lightest);
@@ -423,19 +534,31 @@
423534
.statusSelect.statusSuccess {
424535
color: #10b981;
425536
border-color: #10b981;
426-
background-color: #f0fdf4;
537+
}
538+
539+
[data-theme='dark'] .statusSelect.statusSuccess {
540+
color: #34d399;
541+
border-color: #34d399;
427542
}
428543

429544
.statusSelect.statusError {
430545
color: #ef4444;
431546
border-color: #ef4444;
432-
background-color: #fef2f2;
547+
}
548+
549+
[data-theme='dark'] .statusSelect.statusError {
550+
color: #f87171;
551+
border-color: #f87171;
433552
}
434553

435554
.statusSelect.statusServerError {
436555
color: #6b7280;
437556
border-color: #6b7280;
438-
background-color: #f9fafb;
557+
}
558+
559+
[data-theme='dark'] .statusSelect.statusServerError {
560+
color: #9ca3af;
561+
border-color: #9ca3af;
439562
}
440563

441564
@media (max-width: 768px) {

0 commit comments

Comments
 (0)