feat: ChordGrid component

app/app/components/chord-diagram/chord-grid.tsx

@@ -0,0 +1,47 @@
+import { ChordDiagram } from './chord-diagram';
+import type { Instrument } from './chord-diagram';
+
+interface Props {
+  chords: string[];
+  instrument: Instrument;
+  onInstrumentChange: (i: Instrument) => void;
+}
+
+export function ChordGrid({ chords, instrument, onInstrumentChange }: Props) {
+  if (chords.length === 0) return null;
+
+  return (
+    <div className="p-3">
+      {/* Instrument toggle */}
+      <div className="flex items-center gap-2 mb-3">
+        <span className="text-xs text-muted-foreground">Chords</span>
+        <div className="flex rounded-md border border-border overflow-hidden ml-auto">
+          <button
+            className={`px-2 py-1 text-xs transition-colors ${instrument === 'piano' ? 'bg-primary text-primary-foreground' : 'text-muted-foreground hover:bg-accent'}`}
+            onClick={() => onInstrumentChange('piano')}
+          >
+            Piano
+          </button>
+          <button
+            className={`px-2 py-1 text-xs transition-colors ${instrument === 'guitar' ? 'bg-primary text-primary-foreground' : 'text-muted-foreground hover:bg-accent'}`}
+            onClick={() => onInstrumentChange('guitar')}
+          >
+            Guitar
+          </button>
+        </div>
+      </div>
+
+      {/* Chord cards */}
+      <div className="flex flex-wrap gap-2">
+        {chords.map((chord) => (
+          <div
+            key={chord}
+            className="rounded-md border border-border bg-card"
+          >
+            <ChordDiagram chord={chord} instrument={instrument} />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}