From c3d3407d695265b03125ac55c59a8b1856cbb5bb Mon Sep 17 00:00:00 2001
From: Oliver Bryan <ob248@proton.me>
Date: Sun, 25 Jan 2026 11:32:11 +0000
Subject: [PATCH] octave component

---
 src/components/controls/OctaveSelector.tsx | 24 ++++++++++++++++++++++
 1 file changed, 24 insertions(+)
 create mode 100644 src/components/controls/OctaveSelector.tsx

diff --git a/src/components/controls/OctaveSelector.tsx b/src/components/controls/OctaveSelector.tsx
new file mode 100644
index 0000000..4403d7b
--- /dev/null
+++ b/src/components/controls/OctaveSelector.tsx
@@ -0,0 +1,24 @@
+import { Button } from "@/components/ui/button";
+
+const MIN_OCTAVE = 1;
+const MAX_OCTAVE = 8;
+
+export default function OctaveSelector({
+    value,
+    onChange,
+}: {
+    value: number;
+    onChange: (octave: number) => void;
+}) {
+    return (
+        <div className="flex items-center gap-2">
+            <Button variant="ghost" size="sm" onClick={() => onChange(Math.max(MIN_OCTAVE, value - 1))}>
+                -
+            </Button>
+            <span className="text-sm font-medium tabular-nums">{value}</span>
+            <Button variant="ghost" size="sm" onClick={() => onChange(Math.min(MAX_OCTAVE, value + 1))}>
+                +
+            </Button>
+        </div>
+    );
+}