ok

src/components/EngineControls.tsx

@@ -0,0 +1,47 @@
+import { ENGINE_CONTROLS, SAMPLE_RATES, getComplexityLabel } from '../config/effects'
+import type { EffectValues } from '../types/effects'
+
+interface EngineControlsProps {
+  values: EffectValues
+  onChange: (parameterId: string, value: number) => void
+}
+
+export function EngineControls({ values, onChange }: EngineControlsProps) {
+  const formatValue = (id: string, value: number): string => {
+    switch (id) {
+      case 'sampleRate':
+        return `${SAMPLE_RATES[value]}Hz`
+      case 'complexity':
+        return getComplexityLabel(value)
+      default:
+        const param = ENGINE_CONTROLS[0].parameters.find(p => p.id === id)
+        return `${value}${param?.unit || ''}`
+    }
+  }
+
+  return (
+    <div className="flex items-center gap-6">
+      {ENGINE_CONTROLS[0].parameters.map(param => (
+        <div key={param.id} className="flex flex-col gap-1 min-w-[100px]">
+          <div className="flex justify-between items-baseline">
+            <label className="font-mono text-[9px] tracking-[0.15em] text-white">
+              {param.label.toUpperCase()}
+            </label>
+            <span className="font-mono text-[9px] text-white">
+              {formatValue(param.id, values[param.id] ?? param.default)}
+            </span>
+          </div>
+          <input
+            type="range"
+            min={param.min}
+            max={param.max}
+            step={param.step}
+            value={values[param.id] ?? param.default}
+            onChange={(e) => onChange(param.id, Number(e.target.value))}
+            className="w-full h-[2px] bg-white appearance-none cursor-pointer"
+          />
+        </div>
+      ))}
+    </div>
+  )
+}