init project + layout

2024-04-06 19:03:04 -04:00
parent 775c425971
commit f32d84d2c2
13 changed files with 1363 additions and 290 deletions
--- a/components/editor/index.tsx
+++ b/components/editor/index.tsx
@ -0,0 +1,133 @@
+"use client"
+
+import Editor, { OnMount } from "@monaco-editor/react"
+import monaco from "monaco-editor"
+import { useRef, useState } from "react"
+import theme from "./theme.json"
+
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from "@/components/ui/resizable"
+import { Button } from "../ui/button"
+import { X } from "lucide-react"
+
+export default function CodeEditor() {
+  const editorRef = useRef<null | monaco.editor.IStandaloneCodeEditor>(null)
+  const [code, setCode] = useState([
+    {
+      language: "css",
+      name: "style.css",
+      value: `body { background-color: #282c34; color: white; }`,
+    },
+    {
+      language: "html",
+      name: "index.html",
+      value: `<!DOCTYPE html>
+<html>
+<head>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+  <h1>Hello, world!</h1>
+  <script src="script.js"></script>
+</body>
+</html>`,
+    },
+    {
+      language: "javascript",
+      name: "script.js",
+      value: `console.log("Hello, world!")`,
+    },
+  ])
+
+  const handleEditorMount: OnMount = (editor, monaco) => {
+    editorRef.current = editor
+
+    // import("monaco-themes/themes/Blackboard.json").then((data) => {
+    //   monaco.editor.defineTheme(
+    //     "Blackboard",
+    //     data as monaco.editor.IStandaloneThemeData
+    //   )
+    // })
+    // monaco.editor.setTheme("Blackboard")
+  }
+
+  return (
+    <>
+      <div className="h-full w-52"></div>
+      <ResizablePanelGroup direction="horizontal">
+        <ResizablePanel
+          className="p-2 flex flex-col"
+          maxSize={75}
+          minSize={30}
+          defaultSize={60}
+        >
+          <div className="h-10 w-full flex gap-2">
+            <Button
+              size="sm"
+              className="min-w-20 justify-between"
+              variant="secondary"
+            >
+              index.html <X className="w-3 h-3" />
+            </Button>
+            <Button
+              size="sm"
+              className="min-w-20 justify-between"
+              variant="secondary"
+            >
+              style.css <X className="w-3 h-3" />
+            </Button>
+          </div>
+          <div className="grow w-full overflow-hidden rounded-lg">
+            <Editor
+              height="100%"
+              defaultLanguage="typescript"
+              onMount={handleEditorMount}
+              theme="vs-dark"
+            />
+          </div>
+        </ResizablePanel>
+        <ResizableHandle />
+        <ResizablePanel defaultSize={40}>
+          <ResizablePanelGroup direction="vertical">
+            <ResizablePanel
+              defaultSize={50}
+              minSize={20}
+              className="p-2 flex flex-col"
+            >
+              <div className="h-10 w-full flex gap-2">
+                <Button
+                  size="sm"
+                  className="min-w-20 justify-between"
+                  variant="secondary"
+                >
+                  localhost:3000 <X className="w-3 h-3" />
+                </Button>
+              </div>
+              <div className="w-full grow rounded-lg bg-foreground"></div>
+            </ResizablePanel>
+            <ResizableHandle />
+            <ResizablePanel
+              defaultSize={50}
+              minSize={20}
+              className="p-2 flex flex-col"
+            >
+              <div className="h-10 w-full flex gap-2">
+                <Button
+                  size="sm"
+                  className="min-w-20 justify-between"
+                  variant="secondary"
+                >
+                  Node <X className="w-3 h-3" />
+                </Button>
+              </div>
+              <div className="w-full grow rounded-lg bg-secondary"></div>
+            </ResizablePanel>
+          </ResizablePanelGroup>
+        </ResizablePanel>
+      </ResizablePanelGroup>
+    </>
+  )
+}
--- a/components/editor/theme.json
+++ b/components/editor/theme.json
@ -0,0 +1,697 @@
+{
+  "inherit": true,
+  "base": "vs-dark",
+  "colors": {
+    "editor.background": "101010",
+    "editor.foreground": "FFFFFF",
+    "editor.selectionBackground": "FFFFFF25",
+    "editor.selectionHighlightBackground": "FFFFFF25",
+    "editorLineNumber.foreground": "505050",
+    "editorWidget.background": "101010",
+    "editorWarning.foreground": "FFC799",
+    "editorError.foreground": "FF8080",
+    "editorOverviewRuler.border": "101010",
+    "editorGutter.addedBackground": "99FFE4",
+    "editorGutter.deletedBackground": "FF8080",
+    "editorGutter.modifiedBackground": "FFC799",
+    "diffEditor.insertedTextBackground": "99FFE440",
+    "diffEditor.insertedLineBackground": "99FFE440",
+    "diffEditor.removedTextBackground": "FF808040",
+    "diffEditor.removedLineBackground": "FF808040",
+    "sideBar.background": "101010",
+    "sideBarTitle.foreground": "A0A0A0",
+    "sideBarSectionHeader.foreground": "A0A0A0",
+    "sideBarSectionHeader.background": "101010",
+    "activityBar.background": "101010",
+    "activityBar.foreground": "A0A0A0",
+    "activityBarBadge.background": "FFC799",
+    "activityBarBadge.foreground": "000",
+    "titleBar.activeBackground": "101010",
+    "titleBar.inactiveBackground": "101010",
+    "titleBar.activeForeground": "7E7E7E",
+    "titleBar.inactiveForeground": "707070",
+    "tab.activeBorderTop": "FFC799",
+    "statusBar.debuggingForeground": "FFFFFF",
+    "statusBar.debuggingBackground": "FF7300",
+    "statusBar.background": "101010",
+    "statusBar.foreground": "A0A0A0",
+    "statusBarItem.remoteBackground": "FFC799",
+    "statusBarItem.remoteForeground": "000",
+    "list.activeSelectionForeground": "FFC799",
+    "list.inactiveSelectionBackground": "232323",
+    "badge.background": "FFC799",
+    "badge.foreground": "000",
+    "button.background": "FFC799",
+    "button.hoverBackground": "FFCFA8",
+    "button.foreground": "000",
+    "focusBorder": "FFC799",
+    "icon.foreground": "A0A0A0",
+    "input.background": "1C1C1C",
+    "list.activeSelectionBackground": "232323",
+    "list.hoverBackground": "282828",
+    "list.errorForeground": "FF8080",
+    "list.highlightForeground": "FFC799",
+    "selection.background": "666",
+    "editorBracketHighlight.foreground1": "A0A0A0",
+    "editorBracketHighlight.foreground2": "A0A0A0",
+    "editorBracketHighlight.foreground3": "A0A0A0",
+    "editorBracketHighlight.foreground4": "A0A0A0",
+    "editorBracketHighlight.foreground5": "A0A0A0",
+    "editorBracketHighlight.foreground6": "A0A0A0",
+    "editorBracketHighlight.unexpectedBracket.foreground": "FF8080",
+    "textLink.foreground": "FFC799",
+    "textLink.activeForeground": "FFCFA8",
+    "editorHoverWidget.background": "161616",
+    "editorHoverWidget.border": "282828",
+    "scrollbarSlider.background": "34343480",
+    "scrollbarSlider.hoverBackground": "343434",
+    "gitDecoration.addedResourceForeground": "99FFE4",
+    "gitDecoration.untrackedResourceForeground": "99FFE4",
+    "gitDecoration.modifiedResourceForeground": "FFC799",
+    "gitDecoration.deletedResourceForeground": "FF8080",
+    "gitDecoration.ignoredResourceForeground": "595959",
+    "gitDecoration.conflictingResourceForeground": "FF8080",
+    "gitDecoration.submoduleResourceForeground": "A0A0A0",
+    "settings.modifiedItemIndicator": "FFC799",
+    "terminal.ansiBlack": "101010",
+    "terminal.ansiBlue": "FFC799",
+    "terminal.ansiBrightBlack": "101010",
+    "terminal.ansiBrightBlue": "FFC799",
+    "terminal.ansiBrightCyan": "99FFE4",
+    "terminal.ansiBrightGreen": "99FFE4",
+    "terminal.ansiBrightMagenta": "FBADFF",
+    "terminal.ansiBrightRed": "FF8080",
+    "terminal.ansiBrightWhite": "f8f8f2",
+    "terminal.ansiBrightYellow": "FFC799",
+    "terminal.ansiCyan": "99FFE4",
+    "terminal.ansiGreen": "99FFE4",
+    "terminal.ansiMagenta": "FBADFF",
+    "terminal.ansiRed": "FF8080",
+    "terminal.ansiWhite": "e3e3dd",
+    "terminal.ansiYellow": "FFC799",
+    "terminal.background": "101010",
+    "editorGroup.border": "FFC799",
+    "editorGroupHeader.tabsBackground": "101010",
+    "tab.inactiveBackground": "1C1C1C",
+    "tab.border": "1C1C1C"
+  },
+  "rules": [
+    {
+      "foreground": "595959",
+      "token": "comment"
+    },
+    {
+      "foreground": "595959",
+      "token": "punctuation.definition.comment"
+    },
+    {
+      "foreground": "FFFFFF",
+      "token": "variable"
+    },
+    {
+      "foreground": "FFFFFF",
+      "token": "string constant.other.placeholder"
+    },
+    {
+      "foreground": "FFFFFF",
+      "token": "entity.name.tag"
+    },
+    {
+      "foreground": "FFFFFF",
+      "token": "constant.other.color"
+    },
+    {
+      "foreground": "FF8080",
+      "token": "invalid"
+    },
+    {
+      "foreground": "FF8080",
+      "token": "invalid.illegal"
+    },
+    {
+      "foreground": "FBADFF",
+      "token": "keyword"
+    },
+    {
+      "foreground": "FBADFF",
+      "token": "storage.modifier"
+    },
+    {
+      "foreground": "FBADFF",
+      "token": "keyword.control"
+    },
+    {
+      "foreground": "FBADFF",
+      "token": "constant.other.color"
+    },
+    {
+      "foreground": "FBADFF",
+      "token": "punctuation.separator.inheritance.php"
+    },
+    {
+      "foreground": "FBADFF",
+      "token": "punctuation.definition.tag.html"
+    },
+    {
+      "foreground": "FBADFF",
+      "token": "punctuation.definition.tag.begin.html"
+    },
+    {
+      "foreground": "FBADFF",
+      "token": "punctuation.definition.tag.end.html"
+    },
+    {
+      "foreground": "FBADFF",
+      "token": "punctuation.section.embedded"
+    },
+    {
+      "foreground": "FBADFF",
+      "token": "keyword.other.template"
+    },
+    {
+      "foreground": "FBADFF",
+      "token": "keyword.other.rust"
+    },
+    {
+      "foreground": "FBADFF",
+      "token": "keyword.other.fn.rust"
+    },
+    {
+      "foreground": "FBADFF",
+      "token": "keyword.other.substitution"
+    },
+    {
+      "foreground": "FBADFF",
+      "token": "storage.type"
+    },
+    {
+      "foreground": "FBADFF",
+      "token": "keyword.other.import.java"
+    },
+    {
+      "foreground": "FFFFFF",
+      "token": "storage.modifier.import.java"
+    },
+    {
+      "foreground": "FFC799",
+      "token": "entity.name.tag"
+    },
+    {
+      "foreground": "FFC799",
+      "token": "meta.tag.sgml"
+    },
+    {
+      "foreground": "FFC799",
+      "token": "markup.deleted.git_gutter"
+    },
+    {
+      "foreground": "FFC799",
+      "token": "entity.name.function"
+    },
+    {
+      "foreground": "FFC799",
+      "token": "variable.function"
+    },
+    {
+      "foreground": "FFC799",
+      "token": "support.function"
+    },
+    {
+      "foreground": "FFC799",
+      "token": "keyword.other.special-method"
+    },
+    {
+      "foreground": "FFFFFF",
+      "token": "meta.block variable.other"
+    },
+    {
+      "foreground": "FFFFFF",
+      "token": "support.other.variable"
+    },
+    {
+      "foreground": "FFFFFF",
+      "token": "string.other.link"
+    },
+    {
+      "foreground": "FFC799",
+      "token": "constant.numeric"
+    },
+    {
+      "foreground": "FFC799",
+      "token": "support.constant"
+    },
+    {
+      "foreground": "FFC799",
+      "token": "constant.character"
+    },
+    {
+      "foreground": "FFC799",
+      "token": "constant.escape"
+    },
+    {
+      "foreground": "FFC799",
+      "token": "keyword.other.unit"
+    },
+    {
+      "foreground": "FFC799",
+      "token": "keyword.other"
+    },
+    {
+      "foreground": "FFC799",
+      "token": "constant.language.boolean"
+    },
+    {
+      "foreground": "99FFE4",
+      "token": "string"
+    },
+    {
+      "foreground": "99FFE4",
+      "token": "constant.other.symbol"
+    },
+    {
+      "foreground": "99FFE4",
+      "token": "constant.other.key"
+    },
+    {
+      "foreground": "99FFE4",
+      "token": "keyword.other.fn.rust"
+    },
+    {
+      "foreground": "99FFE4",
+      "token": "meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js"
+    },
+    {
+      "foreground": "FFC799",
+      "token": "entity.name"
+    },
+    {
+      "foreground": "FFC799",
+      "token": "support.type"
+    },
+    {
+      "foreground": "FFC799",
+      "token": "support.class"
+    },
+    {
+      "foreground": "FFC799",
+      "token": "support.other.namespace.use.php"
+    },
+    {
+      "foreground": "FFC799",
+      "token": "meta.use.php"
+    },
+    {
+      "foreground": "FFC799",
+      "token": "support.other.namespace.php"
+    },
+    {
+      "foreground": "FFC799",
+      "token": "markup.changed.git_gutter"
+    },
+    {
+      "foreground": "FFC799",
+      "token": "support.type.sys-types"
+    },
+    {
+      "foreground": "FFFFFF",
+      "token": "source.css support.type.property-name"
+    },
+    {
+      "foreground": "FFFFFF",
+      "token": "source.sass support.type.property-name"
+    },
+    {
+      "foreground": "FFFFFF",
+      "token": "source.scss support.type.property-name"
+    },
+    {
+      "foreground": "FFFFFF",
+      "token": "source.less support.type.property-name"
+    },
+    {
+      "foreground": "FFFFFF",
+      "token": "source.stylus support.type.property-name"
+    },
+    {
+      "foreground": "FFFFFF",
+      "token": "source.postcss support.type.property-name"
+    },
+    {
+      "foreground": "FFFFFF",
+      "token": "source.postcss support.type.property-name"
+    },
+    {
+      "foreground": "FFFFFF",
+      "token": "support.type.vendored.property-name.css"
+    },
+    {
+      "foreground": "FFFFFF",
+      "token": "source.css.scss entity.name.tag"
+    },
+    {
+      "foreground": "FFFFFF",
+      "token": "variable.parameter.keyframe-list.css"
+    },
+    {
+      "foreground": "FFFFFF",
+      "token": "meta.property-name.css"
+    },
+    {
+      "foreground": "FFFFFF",
+      "token": "variable.parameter.url.scss"
+    },
+    {
+      "foreground": "FFFFFF",
+      "token": "meta.property-value.scss"
+    },
+    {
+      "foreground": "FFFFFF",
+      "token": "meta.property-value.css"
+    },
+    {
+      "foreground": "FF8080",
+      "token": "entity.name.module.js"
+    },
+    {
+      "foreground": "FF8080",
+      "token": "variable.import.parameter.js"
+    },
+    {
+      "foreground": "FF8080",
+      "token": "variable.other.class.js"
+    },
+    {
+      "foreground": "99FFE4",
+      "token": "variable.other.constant"
+    },
+    {
+      "foreground": "FFFFFF",
+      "token": "variable.language"
+    },
+    {
+      "foreground": "FFFFFF",
+      "token": "entity.name.method.js"
+    },
+    {
+      "foreground": "FFFFFF",
+      "token": "meta.class-method.js entity.name.function.js"
+    },
+    {
+      "foreground": "FFFFFF",
+      "token": "variable.function.constructor"
+    },
+    {
+      "foreground": "FFFFFF",
+      "token": "entity.other.attribute-name"
+    },
+    {
+      "foreground": "FFFFFF",
+      "token": "meta.property-list.scss"
+    },
+    {
+      "foreground": "FFFFFF",
+      "token": "meta.attribute-selector.scss"
+    },
+    {
+      "foreground": "FFFFFF",
+      "token": "meta.property-value.css"
+    },
+    {
+      "foreground": "FFFFFF",
+      "token": "entity.other.keyframe-offset.css"
+    },
+    {
+      "foreground": "FFFFFF",
+      "token": "meta.selector.css"
+    },
+    {
+      "foreground": "FFFFFF",
+      "token": "entity.name.tag.reference.scss"
+    },
+    {
+      "foreground": "FFFFFF",
+      "token": "entity.name.tag.nesting.css"
+    },
+    {
+      "foreground": "FFFFFF",
+      "token": "punctuation.separator.key-value.css"
+    },
+    {
+      "foreground": "FFC799",
+      "token": "text.html.basic entity.other.attribute-name.html"
+    },
+    {
+      "foreground": "FFC799",
+      "token": "text.html.basic entity.other.attribute-name"
+    },
+    {
+      "foreground": "FFC799",
+      "token": "entity.other.attribute-name.class"
+    },
+    {
+      "foreground": "FFC799",
+      "token": "entity.other.attribute-name.id"
+    },
+    {
+      "foreground": "FFC799",
+      "token": "meta.attribute-selector.scss"
+    },
+    {
+      "foreground": "FFC799",
+      "token": "variable.parameter.misc.css"
+    },
+    {
+      "foreground": "99FFE4",
+      "token": "source.sass keyword.control"
+    },
+    {
+      "foreground": "99FFE4",
+      "token": "meta.attribute-selector.scss"
+    },
+    {
+      "foreground": "99FFE4",
+      "token": "markup.inserted"
+    },
+    {
+      "foreground": "FF8080",
+      "token": "markup.deleted"
+    },
+    {
+      "foreground": "A0A0A0",
+      "token": "markup.changed"
+    },
+    {
+      "foreground": "A0A0A0",
+      "token": "string.regexp"
+    },
+    {
+      "foreground": "A0A0A0",
+      "token": "constant.character.escape"
+    },
+    {
+      "fontStyle": "underline",
+      "token": "*url*"
+    },
+    {
+      "fontStyle": "underline",
+      "token": "*link*"
+    },
+    {
+      "fontStyle": "underline",
+      "token": "*uri*"
+    },
+    {
+      "foreground": "FFFFFF",
+      "token": "tag.decorator.js entity.name.tag.js"
+    },
+    {
+      "foreground": "FFFFFF",
+      "token": "tag.decorator.js punctuation.definition.tag.js"
+    },
+    {
+      "fontStyle": "italic",
+      "foreground": "FF8080",
+      "token": "source.js constant.other.object.key.js string.unquoted.label.js"
+    },
+    {
+      "foreground": "FFC799",
+      "token": "source.json meta.structure.dictionary.json support.type.property-name.json"
+    },
+    {
+      "foreground": "FFC799",
+      "token": "source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json"
+    },
+    {
+      "foreground": "FFC799",
+      "token": "source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json"
+    },
+    {
+      "foreground": "FFC799",
+      "token": "source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json"
+    },
+    {
+      "foreground": "FFC799",
+      "token": "source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json"
+    },
+    {
+      "foreground": "FFC799",
+      "token": "source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json"
+    },
+    {
+      "foreground": "FFC799",
+      "token": "source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json"
+    },
+    {
+      "foreground": "FFC799",
+      "token": "source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json"
+    },
+    {
+      "foreground": "FFC799",
+      "token": "source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json"
+    },
+    {
+      "foreground": "FFFFFF",
+      "token": "text.html.markdown"
+    },
+    {
+      "foreground": "FFFFFF",
+      "token": "punctuation.definition.list_item.markdown"
+    },
+    {
+      "foreground": "A0A0A0",
+      "token": "text.html.markdown markup.inline.raw.markdown"
+    },
+    {
+      "foreground": "FFFFFF",
+      "token": "text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown"
+    },
+    {
+      "foreground": "FFC799",
+      "token": "markdown.heading"
+    },
+    {
+      "foreground": "FFC799",
+      "token": "markup.heading | markup.heading entity.name"
+    },
+    {
+      "foreground": "FFC799",
+      "token": "markup.heading.markdown punctuation.definition.heading.markdown"
+    },
+    {
+      "foreground": "FFC799",
+      "token": "markup.heading"
+    },
+    {
+      "foreground": "FFC799",
+      "token": "markup.inserted.git_gutter"
+    },
+    {
+      "fontStyle": "italic",
+      "foreground": "FFFFFF",
+      "token": "markup.italic"
+    },
+    {
+      "fontStyle": "bold",
+      "foreground": "FFFFFF",
+      "token": "markup.bold"
+    },
+    {
+      "fontStyle": "bold",
+      "foreground": "FFFFFF",
+      "token": "markup.bold string"
+    },
+    {
+      "fontStyle": "bold",
+      "foreground": "FFFFFF",
+      "token": "markup.bold markup.italic"
+    },
+    {
+      "fontStyle": "bold",
+      "foreground": "FFFFFF",
+      "token": "markup.italic markup.bold"
+    },
+    {
+      "fontStyle": "bold",
+      "foreground": "FFFFFF",
+      "token": "markup.quote markup.bold"
+    },
+    {
+      "fontStyle": "bold",
+      "foreground": "FFFFFF",
+      "token": "markup.bold markup.italic string"
+    },
+    {
+      "fontStyle": "bold",
+      "foreground": "FFFFFF",
+      "token": "markup.italic markup.bold string"
+    },
+    {
+      "fontStyle": "bold",
+      "foreground": "FFFFFF",
+      "token": "markup.quote markup.bold string"
+    },
+    {
+      "fontStyle": "underline",
+      "foreground": "FFC799",
+      "token": "markup.underline"
+    },
+    {
+      "foreground": "FFFFFF",
+      "token": "markup.quote punctuation.definition.blockquote.markdown"
+    },
+    {
+      "foreground": "99FFE4",
+      "token": "markup.quote"
+    },
+    {
+      "foreground": "FFFFFF",
+      "token": "string.other.link.title.markdown"
+    },
+    {
+      "foreground": "A0A0A0",
+      "token": "string.other.link.description.title.markdown"
+    },
+    {
+      "foreground": "FFC799",
+      "token": "constant.other.reference.link.markdown"
+    },
+    {
+      "foreground": "A0A0A0",
+      "token": "markup.raw.block"
+    },
+    {
+      "foreground": "00000050",
+      "token": "markup.raw.block.fenced.markdown"
+    },
+    {
+      "foreground": "00000050",
+      "token": "punctuation.definition.fenced.markdown"
+    },
+    {
+      "foreground": "FFFFFF",
+      "token": "markup.raw.block.fenced.markdown"
+    },
+    {
+      "foreground": "FFFFFF",
+      "token": "variable.language.fenced.markdown"
+    },
+    {
+      "foreground": "FFFFFF",
+      "token": "punctuation.section.class.end"
+    },
+    {
+      "foreground": "FFFFFF",
+      "token": "variable.language.fenced.markdown"
+    },
+    {
+      "fontStyle": "bold",
+      "foreground": "65737E",
+      "token": "meta.separator"
+    },
+    {
+      "foreground": "FFFFFF",
+      "token": "markup.table"
+    }
+  ],
+  "encodedTokensColors": []
+}
--- a/components/layout/themeProvider.tsx
+++ b/components/layout/themeProvider.tsx
@ -0,0 +1,9 @@
+"use client"
+
+import * as React from "react"
+import { ThemeProvider as NextThemesProvider } from "next-themes"
+import { type ThemeProviderProps } from "next-themes/dist/types"
+
+export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
+}
--- a/components/ui/button.tsx
+++ b/components/ui/button.tsx
@ -0,0 +1,57 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-8",
+        icon: "h-9 w-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button"
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Button.displayName = "Button"
+
+export { Button, buttonVariants }
--- a/components/ui/resizable.tsx
+++ b/components/ui/resizable.tsx
@ -0,0 +1,45 @@
+"use client"
+
+import { DragHandleDots2Icon } from "@radix-ui/react-icons"
+import * as ResizablePrimitive from "react-resizable-panels"
+
+import { cn } from "@/lib/utils"
+
+const ResizablePanelGroup = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => (
+  <ResizablePrimitive.PanelGroup
+    className={cn(
+      "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
+      className
+    )}
+    {...props}
+  />
+)
+
+const ResizablePanel = ResizablePrimitive.Panel
+
+const ResizableHandle = ({
+  withHandle,
+  className,
+  ...props
+}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
+  withHandle?: boolean
+}) => (
+  <ResizablePrimitive.PanelResizeHandle
+    className={cn(
+      "relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90",
+      className
+    )}
+    {...props}
+  >
+    {withHandle && (
+      <div className="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border">
+        <DragHandleDots2Icon className="h-2.5 w-2.5" />
+      </div>
+    )}
+  </ResizablePrimitive.PanelResizeHandle>
+)
+
+export { ResizablePanelGroup, ResizablePanel, ResizableHandle }