From d71a2fd5344e6a37910aa484fb7e6e948635c4ff Mon Sep 17 00:00:00 2001
From: ngc2207 <cfngc3109@gmail.com>
Date: Sun, 5 Jan 2025 02:47:14 +0800
Subject: [PATCH] feat(playground): implement PlaygroundPage with language
 selection and code editor

---
 src/app/playground/page.tsx | 104 ++++++++++++++++++++++++++++++++++++
 1 file changed, 104 insertions(+)
 create mode 100644 src/app/playground/page.tsx

diff --git a/src/app/playground/page.tsx b/src/app/playground/page.tsx
new file mode 100644
index 0000000..eb90ea8
--- /dev/null
+++ b/src/app/playground/page.tsx
@@ -0,0 +1,104 @@
+"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>
+  );
+}