Skip to content

Commit 9a887d8

Browse files
brettkolodnybrettkolodny
committed
feat: code editor ui
1 parent c95990d commit 9a887d8

File tree

4 files changed

+107
-30
lines changed

4 files changed

+107
-30
lines changed

‎src/App.tsx

Lines changed: 4 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import {
77
} from "@/components";
88
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/Tooltip";
99
import { FileJsonIcon, SettingsIcon, SparklesIcon } from "lucide-react";
10+
import { Editor } from "./Editor";
1011

1112
export const App = () => {
1213
return (
@@ -51,37 +52,11 @@ export const App = () => {
5152
{/* CONTENT */}
5253
<ResizablePanelGroup direction={"horizontal"}>
5354
{/* EDITOR */}
54-
<ResizablePanel className="itesm-start flex flex-col">
55-
<div className="flex w-full items-center justify-between border-b border-b-surface-quaternary pr-3">
56-
<div className="flex">
57-
<button className="flex w-fit min-w-[120px] items-center gap-1 border-x bg-surface-secondary px-4 py-3 text-content-primary transition-colors hover:bg-surface-tertiary">
58-
<FileJsonIcon className="w-[18px] min-w-[18px]" />
59-
<span className="w-full text-sm">Code</span>
60-
</button>
55+
<Editor />
6156

62-
<Tooltip>
63-
<TooltipTrigger asChild={true}>
64-
<button
65-
disabled={true}
66-
className="flex w-fit min-w-[120px] cursor-not-allowed items-center gap-1 px-4 py-3 text-content-secondary"
67-
>
68-
<SettingsIcon className="w-[18px] min-w-[18px]" />
69-
<span className="w-full text-sm">Variables</span>
70-
</button>
71-
</TooltipTrigger>
72-
<TooltipContent>Coming soon</TooltipContent>
73-
</Tooltip>
74-
</div>
57+
<ResizableHandle className="bg-surface-quaternary" />
7558

76-
<Button variant="outline" size="sm">
77-
<SparklesIcon /> Format
78-
</Button>
79-
</div>
80-
</ResizablePanel>
81-
82-
<ResizableHandle className="divide-surface-quaternary" />
83-
84-
{/* PReVIEW */}
59+
{/* PREVIEW */}
8560
<ResizablePanel>Two</ResizablePanel>
8661
</ResizablePanelGroup>
8762
</main>

‎src/Editor.tsx

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
import { ResizablePanel } from "@/components";
2+
import { Button } from "@/components/Button";
3+
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/Tooltip";
4+
// @ts-expect-error TODO: figure this out and fix
5+
import { highlight, languages } from "prismjs/components/prism-core";
6+
import { type FC, useState } from "react";
7+
import CodeEditor from "react-simple-code-editor";
8+
import "prismjs/components/prism-hcl";
9+
import "prismjs/themes/prism.css";
10+
import { FileJsonIcon, SettingsIcon, SparklesIcon } from "lucide-react";
11+
12+
// Adds line numbers to the highlight.
13+
const hightlightWithLineNumbers = (input: string, language: unknown) =>
14+
highlight(input, language)
15+
.split("\n")
16+
.map(
17+
(line: string, i: number) =>
18+
`<span class='editorLineNumber'>${i + 1}</span>${line}`,
19+
)
20+
.join("\n");
21+
22+
export const Editor: FC = () => {
23+
const [code, setCode] = useState(() => defaultCode);
24+
return (
25+
<ResizablePanel className="flex flex-col items-start">
26+
{/* EDITOR TOP BAR */}
27+
<div className="flex w-full items-center justify-between border-b border-b-surface-quaternary pr-3">
28+
<div className="flex">
29+
<button className="flex w-fit min-w-[120px] items-center gap-1 border-x bg-surface-secondary px-4 py-3 text-content-primary transition-colors hover:bg-surface-tertiary">
30+
<FileJsonIcon className="w-[18px] min-w-[18px]" />
31+
<span className="w-full text-sm">Code</span>
32+
</button>
33+
34+
<Tooltip>
35+
<TooltipTrigger asChild={true}>
36+
<button
37+
disabled={true}
38+
className="flex w-fit min-w-[120px] cursor-not-allowed items-center gap-1 px-4 py-3 text-content-secondary"
39+
>
40+
<SettingsIcon className="w-[18px] min-w-[18px]" />
41+
<span className="w-full text-sm">Variables</span>
42+
</button>
43+
</TooltipTrigger>
44+
<TooltipContent>Coming soon</TooltipContent>
45+
</Tooltip>
46+
</div>
47+
48+
<Button variant="outline" size="sm">
49+
<SparklesIcon /> Format
50+
</Button>
51+
</div>
52+
53+
{/* CODE EDITOR */}
54+
<div className="h-full w-full overflow-y-scroll bg-surface-secondary font-mono">
55+
<CodeEditor
56+
value={code}
57+
onValueChange={(code) => setCode(() => code)}
58+
highlight={(code) => hightlightWithLineNumbers(code, languages.hcl)}
59+
textareaId="codeArea"
60+
className="editor pt-3"
61+
/>
62+
</div>
63+
</ResizablePanel>
64+
);
65+
};
66+
67+
const defaultCode = `terraform {
68+
required_providers {
69+
coder = {
70+
source = "coder/coder"
71+
}
72+
}
73+
}`;

‎src/components/Logo.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ export const Logo: FC<SVGProps<SVGSVGElement>> = (props) => {
1111
xmlns="http://www.w3.org/2000/svg"
1212
>
1313
<title>Coder logo</title>
14-
<g clip-path="url(#clip0_103_80)">
14+
<g clipPath="url(#clip0_103_80)">
1515
<path d="M66.3575 21.3584C65.0024 21.3584 64.099 20.5638 64.099 18.9328V9.5647C64.099 3.58419 61.6353 0.280273 55.2705 0.280273H52.314V6.59536H53.2174C55.7222 6.59536 56.913 7.97547 56.913 10.443V18.7237C56.913 22.3203 57.9807 23.7841 60.3212 24.5369C57.9807 25.2479 56.913 26.7534 56.913 30.3501C56.913 32.3994 56.913 34.4486 56.913 36.4979C56.913 38.2126 56.913 39.8855 56.4613 41.6002C56.0097 43.1894 55.2705 44.695 54.244 45.9914C53.6691 46.7442 53.0121 47.3716 52.2729 47.9571V48.7935H55.2295C61.5942 48.7935 64.058 45.4896 64.058 39.5091V30.141C64.058 28.4681 64.9203 27.7153 66.3164 27.7153H68V21.4003H66.3575V21.3584Z"></path>
1616
<path d="M46.2367 9.81532H37.1208C36.9155 9.81532 36.7512 9.64804 36.7512 9.43893V8.72796C36.7512 8.51885 36.9155 8.35156 37.1208 8.35156H46.2778C46.4831 8.35156 46.6473 8.51885 46.6473 8.72796V9.43893C46.6473 9.64804 46.442 9.81532 46.2367 9.81532Z"></path>
1717
<path d="M47.7971 18.8485H41.145C40.9396 18.8485 40.7754 18.6812 40.7754 18.4721V17.7612C40.7754 17.5521 40.9396 17.3848 41.145 17.3848H47.7971C48.0024 17.3848 48.1667 17.5521 48.1667 17.7612V18.4721C48.1667 18.6394 48.0024 18.8485 47.7971 18.8485Z"></path>

‎src/index.css

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -98,4 +98,33 @@
9898
--removed-body-scroll-bar-size: 0 !important;
9999
margin-right: 0 !important;
100100
}
101+
}
102+
103+
/*
104+
* TODO: figure out how to move this all into tailwind
105+
*/
106+
107+
.editor {
108+
color: hsl(var(--content-primary));
109+
counter-reset: line;
110+
padding-top: 12px !important;
111+
}
112+
113+
.editor #codeArea {
114+
outline: none;
115+
padding-left: 60px !important;
116+
padding-top: 12px !important;
117+
}
118+
119+
.editor pre {
120+
padding-left: 60px !important;
121+
}
122+
123+
.editor .editorLineNumber {
124+
position: absolute;
125+
left: 0px;
126+
color: hsl(var(--content-secondary));
127+
text-align: right;
128+
width: 40px;
129+
font-weight: 100;
101130
}

0 commit comments

Comments
 (0)