feat(editor): add LanguageSelector component for language selection

This commit is contained in:
cfngc4594 2025-02-25 22:08:06 +08:00
parent 780908e4d3
commit 7ee6cec0b5

View File

@ -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>
);
}