1

prisma/components/settings/LevelSelect.tsx

@@ -0,0 +1,42 @@
+
+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;