judge/code-editor/src/App.tsx

import {
  DEFAULT_FILES,
  DEFAULT_EDITOR_THEME,
  DEFAULT_EDITOR_LANGUAGE,
} from "@/config";
import { useState } from "react";
import { highlighter } from "@/lib/shiki";
import { Bot, CodeXml } from "lucide-react";
import { shikiToMonaco } from "@shikijs/monaco";
import { DiffEditor, Editor, Monaco } from "@monaco-editor/react";
import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";

function App() {
  const [language, setLanguage] = useState(DEFAULT_EDITOR_LANGUAGE);
  const [theme, setTheme] = useState(DEFAULT_EDITOR_THEME);
  const file = DEFAULT_FILES[language];

  return (
    <div className="h-screen bg-[#282c34] dark overflow-hidden">
      <Tabs defaultValue="code-editor" className="h-full mt-2">
        <ScrollArea className="border-b border-[#3e4452]">
          <TabsList className="gap-1 bg-transparent px-4 mb-2">
            <TabsTrigger
              value="code-editor"
              className="rounded-full data-[state=active]:bg-primary data-[state=active]:text-primary-foreground data-[state=active]:shadow-none"
            >
              <CodeXml
                className="-ms-0.5 me-1.5 opacity-60"
                size={16}
                strokeWidth={2}
                aria-hidden="true"
              />
              Code
            </TabsTrigger>
            <TabsTrigger
              value="diff-editor"
              className="500 rounded-full data-[state=active]:bg-primary data-[state=active]:text-primary-foreground data-[state=active]:shadow-none"
            >
              <Bot
                className="-ms-0.5 me-1.5 opacity-60"
                size={16}
                strokeWidth={2}
                aria-hidden="true"
              />
              AI Assistant
            </TabsTrigger>
          </TabsList>
          <ScrollBar orientation="horizontal" />
        </ScrollArea>
        <TabsContent value="code-editor" className="h-full">
          <Editor
            theme={theme}
            path={file.path}
            defaultLanguage={file.language}
            defaultValue={file.value}
            options={{ automaticLayout: true, minimap: { enabled: false } }}
            beforeMount={(monaco: Monaco) => {
              shikiToMonaco(highlighter, monaco);
            }}
          />
        </TabsContent>
        <TabsContent value="diff-editor" className="h-full">
          <DiffEditor
            theme={theme}
            language={file.language}
            original={file.value}
            modified={file.value}
            options={{ automaticLayout: true, minimap: { enabled: false } }}
            beforeMount={(monaco: Monaco) => {
              shikiToMonaco(highlighter, monaco);
            }}
          />
        </TabsContent>
      </Tabs>
    </div>
  );
}

export default App;