import { motion } from 'framer-motion'; interface IsotypeProps { theme: Record; mode?: 'story' | 'slideshow' | 'thumbnail'; } export default function PianoChordDiagram({ theme, mode = 'story' }: IsotypeProps) { const keys = [ { note: 'C', type: 'white', active: false }, { note: 'C#', type: 'black', active: false }, { note: 'D', type: 'white', active: false }, { note: 'D#', type: 'black', active: false }, { note: 'E', type: 'white', active: true, finger: '1' }, { note: 'F', type: 'white', active: false }, { note: 'F#', type: 'black', active: false }, { note: 'G', type: 'white', active: true, finger: '3' }, { note: 'G#', type: 'black', active: false }, { note: 'A', type: 'white', active: false }, { note: 'A#', type: 'black', active: false }, { note: 'B', type: 'white', active: true, finger: '5' }, ]; const whiteKeys = keys.filter(key => key.type === 'white'); const blackKeys = keys.filter(key => key.type === 'black'); return (

E Minor Chord

E - G - B

{/* Piano Keys Container */} {/* White Keys */}

{whiteKeys.map((key, index) => ( {/* Note Label */}

{key.note}

{/* Finger Number */} {key.active && ( {key.finger} )} ))}

{/* Black Keys */}

{blackKeys.map((key, index) => { const positions = [0.75, 2.25, 4.75, 5.75, 7.25]; // Positioning for black keys return ( ); })}

{/* Instructions */}

Finger numbers

Press these keys

Use your thumb (1), middle finger (3), and pinky (5)

); } export const metadata = { title: 'Piano Chord Diagram', tags: ['music', 'piano', 'chord', 'tutorial'], };

play a chord