Skip to content

Commit 10451c3

Browse files
FredthedoggyFredthedoggy
committed
Pt. 1
1 parent 698fe96 commit 10451c3

File tree

5 files changed

+283
-211
lines changed

5 files changed

+283
-211
lines changed

‎components/TextBox.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ export const TextBox = ({
2626
}) => {
2727
if (!editor) {
2828
return (
29-
<div css={tw`flex flex-col h-full w-full pt-1`}>
29+
<div css={tw`flex flex-col h-full w-full pt-1 text-white`}>
3030
<div css={tw`flex flex-row pl-2`}>
3131
<p css={tw`text-xl font-semibold mx-auto mb-2`}>{title}</p>
3232
<div css={tw`flex flex-row h-8`}>
@@ -51,7 +51,7 @@ export const TextBox = ({
5151
);
5252
} else {
5353
return (
54-
<div css={tw`flex flex-col h-full w-full pt-1`}>
54+
<div css={tw`flex flex-col h-full w-full pt-1 text-white`}>
5555
<p css={tw`text-xl font-semibold mx-auto mb-2`}>{title}</p>
5656
<div
5757
css={css`

‎components/Validator.tsx

Lines changed: 80 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -58,91 +58,93 @@ const Validator = ({
5858

5959
<main
6060
css={css`
61-
${tw`flex flex-col`} height: calc(100vh - 3.5rem)
61+
${tw`flex flex-col md:height[calc(100vh - 3.5rem)]`}
6262
`}
6363
>
64-
<div
65-
css={tw`text-white bg-blue-500 w-full md:px-8 p-16 h-48 text-center`}
66-
>
64+
<div css={tw`w-full md:px-8 p-16 h-48 text-center`}>
6765
<p css={tw`text-3xl font-bold`}>HelpChat</p>
6866
<p css={tw`text-lg`}>{language} Validator</p>
6967
</div>
70-
<div css={tw`flex flex-col md:flex-row flex-grow flex-shrink h-full`}>
71-
<div
72-
css={css`
73-
height: calc(100vh - 15.5em);
74-
${tw`md:w-1/2 p-4 pt-1 pr-2 md:max-width[50vw]`}
75-
`}
76-
>
77-
<TextBox
78-
title={`${language} Config`}
79-
code={config}
80-
editor={setConfig}
81-
language={lang}
82-
/>
83-
</div>
84-
<div
85-
css={css`
86-
height: calc(100vh - 15.5em);
87-
${tw`w-full md:w-1/2 p-4 pl-2 pt-1 flex flex-col md:max-width[50vw]`}
88-
`}
89-
>
90-
<div css={tw`flex flex-col h-full w-full pt-1`}>
91-
<div css={tw`flex flex-row pl-2`}>
92-
<p css={tw`text-xl font-semibold mx-auto mb-2`}>
93-
JSON Object Dumb
94-
</p>
95-
<div css={tw`flex flex-row h-8`}>
96-
<div
97-
css={tw`py-1 px-2 bg-green-400 rounded-md hover:cursor-pointer`}
98-
onClick={() => {
99-
router.query.data =
100-
Buffer.from(config).toString("base64");
101-
router.push(router);
102-
}}
103-
>
104-
<FontAwesomeIcon icon={faLink} size="1x" />
105-
</div>
106-
</div>
107-
</div>
108-
<div
109-
css={css`
110-
${tw`rounded-md overflow-auto h-full`} background-color: #2a2734
111-
`}
112-
>
113-
<div css={tw`py-2 px-4 text-base`}>
114-
{!(error || !parsedConfig) ? (
115-
<ReactJson
116-
src={parsedConfig}
117-
theme={{
118-
base00: duotoneDark.plain.backgroundColor ?? "",
119-
base01: duotoneDark.styles[2].style.color ?? "",
120-
base02: duotoneDark.styles[1].style.color ?? "",
121-
base03: duotoneDark.styles[2].style.color ?? "",
122-
base04: duotoneDark.styles[4].style.color ?? "",
123-
base05: duotoneDark.styles[4].style.color ?? "",
124-
base06: duotoneDark.styles[5].style.color ?? "",
125-
base07: duotoneDark.styles[3].style.color ?? "",
126-
base08: duotoneDark.styles[7].style.color ?? "",
127-
base09: duotoneDark.styles[6].style.color ?? "",
128-
base0A: duotoneDark.styles[9].style.color ?? "",
129-
base0B: duotoneDark.styles[10].style.color ?? "",
130-
base0C: duotoneDark.styles[4].style.color ?? "",
131-
base0D: duotoneDark.styles[2].style.color ?? "",
132-
base0E: duotoneDark.styles[2].style.color ?? "",
133-
base0F: duotoneDark.styles[2].style.color ?? "",
68+
<div
69+
css={tw`p-4 m-2 md:mx-6 lg:mx-12 bg-white/20 backdrop-blur-sm drop-shadow-lg rounded-lg`}
70+
>
71+
<div css={tw`flex flex-col md:flex-row flex-grow flex-shrink h-full`}>
72+
<div
73+
css={css`
74+
height: calc(100vh - 18.5em);
75+
${tw`md:w-1/2 p-4 pt-1 pr-2 md:max-width[50vw]`}
76+
`}
77+
>
78+
<TextBox
79+
title={`${language} Config`}
80+
code={config}
81+
editor={setConfig}
82+
language={lang}
83+
/>
84+
</div>
85+
<div
86+
css={css`
87+
height: calc(100vh - 18.5em);
88+
${tw`w-full md:w-1/2 p-4 pl-2 pt-1 flex flex-col md:max-width[50vw]`}
89+
`}
90+
>
91+
<div css={tw`flex flex-col h-full w-full pt-1`}>
92+
<div css={tw`flex flex-row pl-2`}>
93+
<p css={tw`text-xl font-semibold mx-auto mb-2`}>
94+
JSON Object Dump
95+
</p>
96+
<div css={tw`flex flex-row h-8`}>
97+
<div
98+
css={tw`py-1 px-2 bg-green-400 rounded-md hover:cursor-pointer`}
99+
onClick={() => {
100+
router.query.data =
101+
Buffer.from(config).toString("base64");
102+
router.push(router);
134103
}}
135-
/>
136-
) : (
137-
<span
138-
css={css`
139-
${tw`text-base text-white whitespace-pre`}
140-
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
141-
`}
142104
>
143-
{error}
144-
</span>
145-
)}
105+
<FontAwesomeIcon icon={faLink} size="1x" />
106+
</div>
107+
</div>
108+
</div>
109+
<div
110+
css={css`
111+
${tw`rounded-md overflow-auto h-full`} background-color: #2a2734
112+
`}
113+
>
114+
<div css={tw`py-2 px-4 text-base`}>
115+
{!(error || !parsedConfig) ? (
116+
<ReactJson
117+
src={parsedConfig}
118+
theme={{
119+
base00: duotoneDark.plain.backgroundColor ?? "",
120+
base01: duotoneDark.styles[2].style.color ?? "",
121+
base02: duotoneDark.styles[1].style.color ?? "",
122+
base03: duotoneDark.styles[2].style.color ?? "",
123+
base04: duotoneDark.styles[4].style.color ?? "",
124+
base05: duotoneDark.styles[4].style.color ?? "",
125+
base06: duotoneDark.styles[5].style.color ?? "",
126+
base07: duotoneDark.styles[3].style.color ?? "",
127+
base08: duotoneDark.styles[7].style.color ?? "",
128+
base09: duotoneDark.styles[6].style.color ?? "",
129+
base0A: duotoneDark.styles[9].style.color ?? "",
130+
base0B: duotoneDark.styles[10].style.color ?? "",
131+
base0C: duotoneDark.styles[4].style.color ?? "",
132+
base0D: duotoneDark.styles[2].style.color ?? "",
133+
base0E: duotoneDark.styles[2].style.color ?? "",
134+
base0F: duotoneDark.styles[2].style.color ?? "",
135+
}}
136+
/>
137+
) : (
138+
<span
139+
css={css`
140+
${tw`text-base whitespace-pre`}
141+
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
142+
`}
143+
>
144+
{error}
145+
</span>
146+
)}
147+
</div>
146148
</div>
147149
</div>
148150
</div>

0 commit comments

Comments
 (0)