83 lines
3.0 KiB
TypeScript
83 lines
3.0 KiB
TypeScript
"use client";
|
|
|
|
import { ChevronDown, Globe } from "lucide-react";
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuTrigger,
|
|
DropdownMenuContent,
|
|
DropdownMenuRadioGroup,
|
|
DropdownMenuRadioItem,
|
|
} from "@/components/ui/dropdown-menu";
|
|
import { Button } from "@/components/ui/button";
|
|
import { AlgorithmKey, LanguageCode } from "@/lib/types";
|
|
|
|
const ALGORITHMS: { key: AlgorithmKey; label: string }[] = [
|
|
{ key: "bubble", label: "Bubble Sort" },
|
|
{ key: "insertion", label: "Insertion Sort" },
|
|
{ key: "merge", label: "Merge Sort" },
|
|
{ key: "heap", label: "Heap Sort" },
|
|
{ key: "quick", label: "Quick Sort" },
|
|
{ key: "radix", label: "Radix Sort" },
|
|
{ key: "counting", label: "Counting Sort" },
|
|
{ key: "bucket", label: "Bucket Sort" },
|
|
{ key: "shell", label: "Shell Sort" },
|
|
];
|
|
|
|
const LANGUAGES: LanguageCode[] = ["en", "fr", "it", "de", "es", "ja", "no", "sv", "ua", "ru"];
|
|
|
|
interface AlgorithmPickerProps {
|
|
value: AlgorithmKey;
|
|
onChange: (key: AlgorithmKey) => void;
|
|
triggerLabel: string;
|
|
}
|
|
|
|
export function AlgorithmPicker({ value, onChange, triggerLabel }: AlgorithmPickerProps) {
|
|
const current = ALGORITHMS.find((a) => a.key === value)?.label ?? triggerLabel;
|
|
return (
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button variant="secondary" className="gap-2 justify-between min-w-[180px]">
|
|
{current}
|
|
<ChevronDown className="h-4 w-4 opacity-60" />
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="start">
|
|
<DropdownMenuRadioGroup value={value} onValueChange={(v) => onChange(v as AlgorithmKey)}>
|
|
{ALGORITHMS.map((a) => (
|
|
<DropdownMenuRadioItem key={a.key} value={a.key}>
|
|
{a.label}
|
|
</DropdownMenuRadioItem>
|
|
))}
|
|
</DropdownMenuRadioGroup>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
);
|
|
}
|
|
|
|
interface LanguagePickerProps {
|
|
value: LanguageCode;
|
|
onChange: (lang: LanguageCode) => void;
|
|
}
|
|
|
|
export function LanguagePicker({ value, onChange }: LanguagePickerProps) {
|
|
return (
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button variant="outline" size="sm" className="gap-1.5">
|
|
<Globe className="h-3.5 w-3.5" />
|
|
{value.toUpperCase()}
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="end">
|
|
<DropdownMenuRadioGroup value={value} onValueChange={(v) => onChange(v as LanguageCode)}>
|
|
{LANGUAGES.map((lang) => (
|
|
<DropdownMenuRadioItem key={lang} value={lang}>
|
|
{lang.toUpperCase()}
|
|
</DropdownMenuRadioItem>
|
|
))}
|
|
</DropdownMenuRadioGroup>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
);
|
|
}
|