antigravity one shot

src/components/Controls.tsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import { Settings, HelpCircle, Guitar } from 'lucide-react';
+import { TUNINGS } from '../music/Tunings';
+
+export type Difficulty = 'all' | 'first_pos' | 'open' | 'e_string';
+
+export interface AppSettings {
+    difficulty: Difficulty;
+    showHint: boolean;
+    tuningId: string;
+}
+
+interface ControlsProps {
+    settings: AppSettings;
+    onUpdateSettings: (s: AppSettings) => void;
+}
+
+export const Controls: React.FC<ControlsProps> = ({ settings, onUpdateSettings }) => {
+    const handleDifficultyChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+        onUpdateSettings({ ...settings, difficulty: e.target.value as Difficulty });
+    };
+
+    const handleTuningChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+        onUpdateSettings({ ...settings, tuningId: e.target.value });
+    };
+
+    const toggleHint = () => {
+        onUpdateSettings({ ...settings, showHint: !settings.showHint });
+    };
+
+    return (
+        <div className="controls-container">
+            <div className="control-group">
+                <label className="control-label">
+                    <Guitar size={18} />
+                    <span>Tuning</span>
+                </label>
+                <select
+                    value={settings.tuningId}
+                    onChange={handleTuningChange}
+                    className="control-select"
+                >
+                    {Object.entries(TUNINGS).map(([id, tuning]) => (
+                        <option key={id} value={id}>{tuning.name}</option>
+                    ))}
+                </select>
+            </div>
+
+            <div className="control-group">
+                <label className="control-label">
+                    <Settings size={18} />
+                    <span>Range</span>
+                </label>
+                <select
+                    value={settings.difficulty}
+                    onChange={handleDifficultyChange}
+                    className="control-select"
+                >
+                    <option value="open">Open Strings (Beginner)</option>
+                    <option value="first_pos">First Position</option>
+                    <option value="e_string">E String Only</option>
+                    <option value="all">All Notes</option>
+                </select>
+            </div>
+
+            <button
+                className={`control-button ${settings.showHint ? 'active' : ''}`}
+                onClick={toggleHint}
+                title="Show Hint"
+            >
+                <HelpCircle size={20} />
+            </button>
+        </div>
+    );
+};