judge/src/app/playground/page.tsx

"use client";

import { useState } from "react";
import { Editor } from "@monaco-editor/react";
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
import { COriginal, CplusplusOriginal, JavaOriginal } from "devicons-react";

const files: {
  [key: string]: { name: string; language: string; value: string };
} = {
  c: {
    name: "main.c",
    language: "c",
    value: `#include <stdio.h>
int main() {
    printf("Hello, World!");
    return 0;
}`,
  },
  cpp: {
    name: "main.cpp",
    language: "cpp",
    value: `#include <iostream>
int main() {
    std::cout << "Hello, World!";
    return 0;
}`,
  },
  java: {
    name: "Main.java",
    language: "java",
    value: `public class Main {
    public static void main(String[] args) {
        System.out.println("Hello, World!");
    }
}`,
  },
};

export default function PlaygroundPage() {
  const [language, setLanguage] = useState<keyof typeof files>("c");
  const file = files[language];

  return (
    <div className="h-full flex flex-col">
      <Tabs defaultValue={language as string}>
        <ScrollArea>
          <TabsList className="m-3">
            <TabsTrigger
              value="c"
              onClick={() => setLanguage("c")}
              disabled={language === "c"}
            >
              <COriginal
                className="-ms-0.5 me-1.5"
                size={16}
                strokeWidth={2}
                aria-hidden="true"
              />
              C
            </TabsTrigger>
            <TabsTrigger
              value="cpp"
              className="group"
              onClick={() => setLanguage("cpp")}
              disabled={language === "cpp"}
            >
              <CplusplusOriginal
                className="-ms-0.5 me-1.5"
                size={16}
                strokeWidth={2}
                aria-hidden="true"
              />
              C++
            </TabsTrigger>
            <TabsTrigger
              value="java"
              className="group"
              onClick={() => setLanguage("java")}
              disabled={language === "java"}
            >
              <JavaOriginal
                className="-ms-0.5 me-1.5"
                size={16}
                strokeWidth={2}
                aria-hidden="true"
              />
              Java
            </TabsTrigger>
          </TabsList>
          <ScrollBar orientation="horizontal" />
        </ScrollArea>
      </Tabs>
      <Editor
        theme="vs-dark"
        path={file.name}
        defaultLanguage={file.language}
        defaultValue={file.value}
        options={{ automaticLayout: true }}
      />
    </div>
  );
}