From 7ee6cec0b5db48e3434ec34d55e878128fc9961c Mon Sep 17 00:00:00 2001
From: cfngc4594 <cfngc4594@gmail.com>
Date: Tue, 25 Feb 2025 22:08:06 +0800
Subject: [PATCH] feat(editor): add LanguageSelector component for language
 selection

---
 .../@editor/components/language-selector.tsx  | 33 +++++++++++++++++++
 1 file changed, 33 insertions(+)
 create mode 100644 src/app/(app)/playground/@workspace/@editor/components/language-selector.tsx

diff --git a/src/app/(app)/playground/@workspace/@editor/components/language-selector.tsx b/src/app/(app)/playground/@workspace/@editor/components/language-selector.tsx
new file mode 100644
index 0000000..c1aeb84
--- /dev/null
+++ b/src/app/(app)/playground/@workspace/@editor/components/language-selector.tsx
@@ -0,0 +1,33 @@
+"use client";
+
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { useCodeEditorState } from "@/store/useCodeEditor";
+import { SUPPORTED_LANGUAGES } from "@/constants/language";
+
+export default function LanguageSelector() {
+  const { language, setLanguage } = useCodeEditorState();
+
+  return (
+    <Select value={language} onValueChange={setLanguage}>
+      <SelectTrigger className="h-6 px-1.5 py-0.5 [&>span]:flex [&>span]:items-center [&>span]:gap-2 [&>span_svg]:shrink-0 [&>span_svg]:text-muted-foreground/80">
+        <SelectValue placeholder="Select language" />
+      </SelectTrigger>
+      <SelectContent className="[&_*[role=option]>span>svg]:shrink-0 [&_*[role=option]>span>svg]:text-muted-foreground/80 [&_*[role=option]>span]:end-2 [&_*[role=option]>span]:start-auto [&_*[role=option]>span]:flex [&_*[role=option]>span]:items-center [&_*[role=option]>span]:gap-2 [&_*[role=option]]:pe-8 [&_*[role=option]]:ps-2">
+        {SUPPORTED_LANGUAGES.map((lang) => (
+          <SelectItem key={lang.id} value={lang.id}>
+            {lang.icon}
+            <span className="truncate text-sm font-semibold mr-1">
+              {lang.label}
+            </span>
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  );
+}