From a9ddf03e93d875864d151285abd041219d42e8c2 Mon Sep 17 00:00:00 2001
From: ngc2207 <cfngc3109@gmail.com>
Date: Tue, 17 Dec 2024 18:22:51 +0800
Subject: [PATCH] feat(playground): add support for C++ and TypeScript in code
 editor and sidebar

---
 src/app/playground/components/code-editor.tsx      |  2 ++
 .../playground/components/playground-sidebar.tsx   | 14 +++++++++++++-
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/src/app/playground/components/code-editor.tsx b/src/app/playground/components/code-editor.tsx
index c71b4dd..4bf03f3 100644
--- a/src/app/playground/components/code-editor.tsx
+++ b/src/app/playground/components/code-editor.tsx
@@ -26,8 +26,10 @@ const ADDITIONAL_THEMES = [
 
 const ADDITIONAL_LANGUAGES = [
   "c",
+  "cpp",
   "java",
   "python",
+  "typescript",
 ] as const satisfies Parameters<typeof createHighlighter>[0]["langs"];
 
 export function CodeEditor() {
diff --git a/src/app/playground/components/playground-sidebar.tsx b/src/app/playground/components/playground-sidebar.tsx
index ae23804..5b9c2ec 100644
--- a/src/app/playground/components/playground-sidebar.tsx
+++ b/src/app/playground/components/playground-sidebar.tsx
@@ -1,5 +1,12 @@
 "use client";
 
+import {
+  COriginal,
+  CplusplusOriginal,
+  JavaOriginal,
+  PythonOriginal,
+  TypescriptOriginal,
+} from "devicons-react";
 import * as React from "react";
 import {
   Sidebar,
@@ -22,7 +29,6 @@ import {
 import * as actions from "@/actions";
 import { useTranslations } from "next-intl";
 import { useSession } from "next-auth/react";
-import { COriginal, JavaOriginal, PythonOriginal } from "devicons-react";
 import { useCodeEditorStore } from "@/store/codeEditorStore";
 import { ChevronRight, File, Folder, FolderOpen } from "lucide-react";
 
@@ -137,10 +143,14 @@ function Tree({ item }: { item: FileTree }) {
 
   if (fileExtension === "c") {
     fileIcon = <COriginal />;
+  } else if (fileExtension === "cpp") {
+    fileIcon = <CplusplusOriginal />;
   } else if (fileExtension === "java") {
     fileIcon = <JavaOriginal />;
   } else if (fileExtension === "py") {
     fileIcon = <PythonOriginal />;
+  } else if (fileExtension === "ts") {
+    fileIcon = <TypescriptOriginal />;
   }
 
   const [isOpen, setIsOpen] = React.useState(false);
@@ -148,8 +158,10 @@ function Tree({ item }: { item: FileTree }) {
 
   const langMap: { [key: string]: string } = {
     c: "c",
+    cpp: "cpp",
     java: "java",
     py: "python",
+    ts: "typescript",
   };
 
   const handleFileClick = async () => {