From b0e00e7d691bb18538da7f3433953a2e14e6d146 Mon Sep 17 00:00:00 2001
From: cfngc4594 <cfngc4594@gmail.com>
Date: Sun, 16 Mar 2025 13:33:16 +0800
Subject: [PATCH] feat(language-selector): integrate icons for languages in
 language selector

---
 .../editor/components/language-selector.tsx   | 23 +++++++++++--------
 1 file changed, 14 insertions(+), 9 deletions(-)

diff --git a/src/components/features/playground/workspace/editor/components/language-selector.tsx b/src/components/features/playground/workspace/editor/components/language-selector.tsx
index ee7461b..aedf180 100644
--- a/src/components/features/playground/workspace/editor/components/language-selector.tsx
+++ b/src/components/features/playground/workspace/editor/components/language-selector.tsx
@@ -13,9 +13,11 @@ import { Skeleton } from "@/components/ui/skeleton";
 import LanguageServerConfig from "@/config/language-server";
 import { EditorLanguageConfig } from "@/config/editor-language";
 import { useCodeEditorStore } from "@/store/useCodeEditorStore";
+import { EditorLanguageIcons } from "@/config/editor-language-icons";
 
 export default function LanguageSelector() {
-  const { hydrated, language, setLanguage, setPath, setLspConfig } = useCodeEditorStore();
+  const { hydrated, language, setLanguage, setPath, setLspConfig } =
+    useCodeEditorStore();
 
   if (!hydrated) {
     return <Skeleton className="h-6 w-16 rounded-2xl" />;
@@ -33,14 +35,17 @@ export default function LanguageSelector() {
         <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">
-        {Object.values(EditorLanguageConfig).map((langConfig) => (
-          <SelectItem key={langConfig.id} value={langConfig.id}>
-            <langConfig.icon size={16} aria-hidden="true" />
-            <span className="truncate text-sm font-semibold mr-2">
-              {langConfig.label}
-            </span>
-          </SelectItem>
-        ))}
+        {Object.values(EditorLanguageConfig).map((langConfig) => {
+          const Icon = EditorLanguageIcons[langConfig.id];
+          return (
+            <SelectItem key={langConfig.id} value={langConfig.id}>
+              <Icon size={16} aria-hidden="true" />
+              <span className="truncate text-sm font-semibold mr-2">
+                {langConfig.label}
+              </span>
+            </SelectItem>
+          );
+        })}
       </SelectContent>
     </Select>
   );