43 lines
1.4 KiB
TypeScript
43 lines
1.4 KiB
TypeScript
|
|
import React from 'react';
|
|
import { ChevronDown } from 'lucide-react';
|
|
import { ThinkingLevel } from '../../types';
|
|
|
|
interface LevelSelectProps {
|
|
label: string;
|
|
value: ThinkingLevel;
|
|
validLevels: ThinkingLevel[];
|
|
onChange: (v: ThinkingLevel) => void;
|
|
desc: string;
|
|
}
|
|
|
|
const LevelSelect = ({
|
|
label,
|
|
value,
|
|
validLevels,
|
|
onChange,
|
|
desc
|
|
}: LevelSelectProps) => (
|
|
<div className="space-y-2">
|
|
<div className="flex justify-between items-baseline">
|
|
<label className="text-sm font-medium text-slate-700">{label}</label>
|
|
<span className="text-xs text-slate-500 uppercase tracking-wider bg-slate-100 border border-slate-200 px-2 py-0.5 rounded">{value}</span>
|
|
</div>
|
|
<div className="relative">
|
|
<select
|
|
value={value}
|
|
onChange={(e) => onChange(e.target.value as ThinkingLevel)}
|
|
className="w-full bg-slate-50 border border-slate-200 text-slate-800 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block p-2.5 outline-none appearance-none cursor-pointer transition-colors hover:border-slate-300"
|
|
>
|
|
{validLevels.map(l => (
|
|
<option key={l} value={l}>{l.charAt(0).toUpperCase() + l.slice(1)}</option>
|
|
))}
|
|
</select>
|
|
<ChevronDown className="absolute right-3 top-3 text-slate-400 pointer-events-none" size={14} />
|
|
</div>
|
|
<p className="text-xs text-slate-500 leading-relaxed">{desc}</p>
|
|
</div>
|
|
);
|
|
|
|
export default LevelSelect;
|