feat(playground): add support for C++ and TypeScript in code editor and sidebar

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() {

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 () => {