30 lines
1.2 KiB
TypeScript
30 lines
1.2 KiB
TypeScript
import {
|
|
Select,
|
|
SelectItem,
|
|
SelectValue,
|
|
SelectContent,
|
|
SelectTrigger,
|
|
} from "@/components/ui/select";
|
|
import { SUPPORTED_LANGUAGES } from "@/constants/languages";
|
|
import { useCodeEditorStore } from "@/store/useCodeEditorStore";
|
|
|
|
export default function LanguageSelector() {
|
|
const { language, setLanguage } = useCodeEditorStore();
|
|
|
|
return (
|
|
<Select value={language} onValueChange={setLanguage}>
|
|
<SelectTrigger className="[&>span]:flex [&>span]:items-center [&>span]:gap-2 [&>span_svg]:shrink-0 [&>span_svg]:text-muted-foreground/80 w-36">
|
|
<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.key} value={lang.value}>
|
|
<lang.icon size={16} aria-hidden="true" />
|
|
<span className="truncate">{lang.label}</span>
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
);
|
|
}
|