edu panel
This commit is contained in:
vadimwit
@@ -0,0 +1,249 @@
|
||||
import { useState } from 'react'
|
||||
import ChordBox from './ChordBox'
|
||||
import MiniPiano from './MiniPiano'
|
||||
import { getGuitarVoicings, getPianoTechniques, parseChord } from '../lib/voicings'
|
||||
import { CHORD_TYPES, NOTES, getChordsInKey, toRomanNumeral } from '../lib/theory'
|
||||
import { FAMOUS_PROGRESSIONS, progressionInKey } from '../lib/education'
|
||||
|
||||
const CHORD_TYPE_OPTIONS = [
|
||||
{ key: 'maj', label: 'Major' },
|
||||
{ key: 'min', label: 'Minor' },
|
||||
{ key: 'dom7', label: '7' },
|
||||
{ key: 'maj7', label: 'maj7' },
|
||||
{ key: 'min7', label: 'm7' },
|
||||
{ key: 'dim', label: 'dim' },
|
||||
{ key: 'dim7', label: 'dim7' },
|
||||
{ key: 'half_dim', label: 'm7♭5' },
|
||||
{ key: 'aug', label: 'aug' },
|
||||
{ key: 'sus4', label: 'sus4' },
|
||||
{ key: 'sus2', label: 'sus2' },
|
||||
{ key: 'maj6', label: '6' },
|
||||
{ key: 'min6', label: 'm6' },
|
||||
{ key: 'add9', label: 'add9' },
|
||||
]
|
||||
|
||||
const MAJOR_TYPES = new Set(['maj','maj7','maj6','add9','sus4','sus2','aug','dom7'])
|
||||
|
||||
// ─── Quick-pick chip row ──────────────────────────────────────────────────────
|
||||
function ChipRow({ label, chords, active, keyInfo, onSelect }) {
|
||||
if (!chords?.length) return null
|
||||
return (
|
||||
<div className="flex items-start gap-2 flex-wrap">
|
||||
<span className="text-[10px] uppercase tracking-wider text-gray-600 w-16 pt-1 shrink-0">{label}</span>
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
{chords.map(chord => {
|
||||
const rn = keyInfo?.root ? toRomanNumeral(chord, keyInfo.root, keyInfo.mode) : ''
|
||||
return (
|
||||
<button key={chord} onClick={() => onSelect(chord)}
|
||||
className={`flex flex-col items-center px-2.5 py-1 rounded-lg border text-xs font-bold transition-all ${
|
||||
active === chord
|
||||
? 'bg-accent border-accent text-white'
|
||||
: 'bg-surface border-border text-gray-300 hover:border-accent/50 hover:text-accent'
|
||||
}`}>
|
||||
<span>{chord}</span>
|
||||
{rn && <span className="text-[9px] font-normal opacity-60 leading-none mt-0.5">{rn}</span>}
|
||||
</button>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// ─── Guitar voicings grid ─────────────────────────────────────────────────────
|
||||
function GuitarGrid({ chordName }) {
|
||||
const voicings = getGuitarVoicings(chordName)
|
||||
if (!voicings.length) return <p className="text-gray-600 text-sm py-4">No voicings for {chordName}.</p>
|
||||
return (
|
||||
<div>
|
||||
<div className="flex flex-wrap gap-4">
|
||||
{voicings.map((v, i) => (
|
||||
<div key={i} className="flex flex-col items-center p-3 rounded-xl bg-surface border border-border hover:border-accent/30 transition-colors">
|
||||
<ChordBox frets={v.frets} fingers={v.fingers} barre={v.barre} baseFret={v.baseFret} />
|
||||
<p className="text-[11px] text-gray-500 text-center mt-1 max-w-[110px] leading-tight">{v.label}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<p className="text-[11px] text-gray-700 mt-3">
|
||||
Purple = chord tone · finger numbers inside dots (1=index 4=pinky) · fret number on left if not starting at fret 1
|
||||
</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// ─── Piano techniques grid ────────────────────────────────────────────────────
|
||||
function PianoGrid({ chordName }) {
|
||||
const parsed = parseChord(chordName)
|
||||
const techniques = getPianoTechniques(chordName)
|
||||
const rootPc = parsed?.rootPc ?? 0
|
||||
if (!techniques.length) return <p className="text-gray-600 text-sm py-4">No techniques for {chordName}.</p>
|
||||
return (
|
||||
<div className="flex flex-col gap-3">
|
||||
{techniques.map((t, i) => (
|
||||
<div key={i} className="flex flex-col lg:flex-row gap-3 p-3 bg-surface border border-border rounded-xl hover:border-accent/30 transition-colors">
|
||||
<div className="shrink-0 overflow-x-auto">
|
||||
<MiniPiano rootPc={rootPc} lh={t.lh} rh={t.rh} />
|
||||
</div>
|
||||
<div className="flex flex-col gap-1 min-w-0 justify-center">
|
||||
<p className="font-bold text-white text-sm">{t.name}</p>
|
||||
<p className="text-gray-400 text-xs">{t.desc}</p>
|
||||
<p className="text-xs text-amber-400/80 mt-0.5">
|
||||
<span className="text-amber-400 font-semibold">Tip:</span> {t.tip}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// ─── Famous progressions using this chord as tonic ───────────────────────────
|
||||
function ProgressionCards({ chordName, onChordClick }) {
|
||||
const parsed = parseChord(chordName)
|
||||
if (!parsed) return null
|
||||
const { rootPc, type } = parsed
|
||||
const root = NOTES[rootPc]
|
||||
const isMajor = MAJOR_TYPES.has(type)
|
||||
|
||||
const matching = FAMOUS_PROGRESSIONS.filter(p => {
|
||||
const q0 = p.qualities[0]
|
||||
return isMajor ? MAJOR_TYPES.has(q0) : !MAJOR_TYPES.has(q0)
|
||||
}).slice(0, 6)
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-3">
|
||||
<p className="text-xs text-gray-500">
|
||||
Famous progressions with <span className="text-accent font-bold">{chordName}</span> as the tonic.
|
||||
Click any chord to see its voicings.
|
||||
</p>
|
||||
{matching.map(prog => {
|
||||
const chordsHere = progressionInKey(prog, root)
|
||||
return (
|
||||
<div key={prog.id} className="p-3 bg-surface border border-border rounded-xl">
|
||||
<div className="flex items-center flex-wrap gap-2 mb-2">
|
||||
<span className="font-bold text-white text-sm">{prog.name}</span>
|
||||
<span className="text-[10px] font-mono text-gray-600">{prog.pattern}</span>
|
||||
{prog.genre.slice(0, 2).map(g => (
|
||||
<span key={g} className="px-1.5 py-0.5 bg-accent/10 border border-accent/20 rounded text-[10px] text-accent">{g}</span>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-1.5 items-center mb-2">
|
||||
{chordsHere.map((c, i) => (
|
||||
<span key={i} className="flex items-center gap-1">
|
||||
<button onClick={() => onChordClick?.(c)}
|
||||
className={`px-2.5 py-1 rounded-lg font-bold text-sm border transition-all ${
|
||||
i === 0
|
||||
? 'bg-accent border-accent text-white'
|
||||
: 'bg-panel border-border text-gray-200 hover:border-accent/50 hover:text-accent'
|
||||
}`}>
|
||||
{c}
|
||||
</button>
|
||||
{i < chordsHere.length - 1 && <span className="text-gray-700 text-xs">→</span>}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
<p className="text-xs text-gray-600 leading-snug">{prog.description}</p>
|
||||
{prog.songs.length > 0 && (
|
||||
<p className="text-[11px] text-gray-700 mt-1">{prog.songs.slice(0, 3).join(' · ')}</p>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// ─── Main panel ───────────────────────────────────────────────────────────────
|
||||
export default function ExplorePanel({ keyInfo, chordHistory, onChordClick }) {
|
||||
const [open, setOpen] = useState(false)
|
||||
const [root, setRoot] = useState('C')
|
||||
const [typeKey, setTypeKey] = useState('maj')
|
||||
const [view, setView] = useState('guitar') // guitar | piano | progressions
|
||||
const [active, setActive] = useState('')
|
||||
|
||||
const chordName = root + (CHORD_TYPES[typeKey]?.suffix ?? '')
|
||||
|
||||
function selectChord(chord) {
|
||||
setActive(chord)
|
||||
const p = parseChord(chord)
|
||||
if (p) { setRoot(NOTES[p.rootPc]); setTypeKey(p.type) }
|
||||
}
|
||||
|
||||
// Context-aware quick-picks
|
||||
const recentChords = [...new Set([...(chordHistory ?? [])].reverse())].slice(0, 12)
|
||||
const keyChords = keyInfo?.root ? getChordsInKey(keyInfo.root, keyInfo.mode ?? 'major') : []
|
||||
|
||||
return (
|
||||
<div className="mb-3 bg-panel border border-border rounded-xl overflow-hidden">
|
||||
<button onClick={() => setOpen(v => !v)}
|
||||
className="w-full flex items-center justify-between px-4 py-2 text-sm text-gray-400 hover:text-gray-200 transition-all">
|
||||
<span>EXPLORE ANY CHORD</span>
|
||||
<span>{open ? '▲' : '▼'}</span>
|
||||
</button>
|
||||
|
||||
{open && (
|
||||
<div className="border-t border-border p-4 flex flex-col gap-4">
|
||||
|
||||
{/* ── Context quick-picks ── */}
|
||||
{(recentChords.length > 0 || keyChords.length > 0) && (
|
||||
<div className="flex flex-col gap-2.5 p-3 bg-surface border border-border rounded-xl">
|
||||
<ChipRow label="History" chords={recentChords} active={active} keyInfo={keyInfo} onSelect={selectChord} />
|
||||
{keyChords.length > 0 && recentChords.length > 0 && <div className="h-px bg-border" />}
|
||||
{keyChords.length > 0 && (
|
||||
<ChipRow
|
||||
label={keyInfo.root + ' ' + (keyInfo.mode ?? '')}
|
||||
chords={keyChords} active={active} keyInfo={keyInfo} onSelect={selectChord}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* ── Manual chord picker ── */}
|
||||
<div className="flex flex-wrap gap-2 items-center p-3 bg-surface border border-border rounded-xl">
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{NOTES.map(n => (
|
||||
<button key={n} onClick={() => { setRoot(n); setActive('') }}
|
||||
className={`px-2 py-0.5 rounded text-xs font-bold transition-all ${
|
||||
root === n ? 'bg-accent text-white' : 'bg-border text-gray-400 hover:text-white'
|
||||
}`}>
|
||||
{n}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<div className="w-px h-5 bg-border shrink-0" />
|
||||
<div className="relative">
|
||||
<select value={typeKey} onChange={e => { setTypeKey(e.target.value); setActive('') }}
|
||||
className="appearance-none bg-panel border border-border rounded-lg pl-2 pr-6 py-1 text-xs text-gray-200 cursor-pointer focus:outline-none focus:border-accent">
|
||||
{CHORD_TYPE_OPTIONS.map(o => <option key={o.key} value={o.key}>{o.label}</option>)}
|
||||
</select>
|
||||
<span className="pointer-events-none absolute right-1.5 top-1/2 -translate-y-1/2 text-gray-500 text-xs">▾</span>
|
||||
</div>
|
||||
<div className="text-2xl font-black text-accent ml-2">{chordName}</div>
|
||||
</div>
|
||||
|
||||
{/* ── View tabs ── */}
|
||||
<div className="flex gap-1 bg-surface border border-border rounded-xl p-1 w-fit">
|
||||
{[
|
||||
{ key: 'guitar', label: '🎸 Guitar Voicings' },
|
||||
{ key: 'piano', label: '🎹 Piano Techniques' },
|
||||
{ key: 'progressions', label: '🎵 Progressions' },
|
||||
].map(t => (
|
||||
<button key={t.key} onClick={() => setView(t.key)}
|
||||
className={`px-3 py-1.5 rounded-lg text-xs font-semibold transition-all whitespace-nowrap ${
|
||||
view === t.key ? 'bg-accent text-white' : 'text-gray-400 hover:text-white'
|
||||
}`}>
|
||||
{t.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* ── Content ── */}
|
||||
{view === 'guitar' && <GuitarGrid chordName={chordName} />}
|
||||
{view === 'piano' && <PianoGrid chordName={chordName} />}
|
||||
{view === 'progressions' && <ProgressionCards chordName={chordName} onChordClick={c => { selectChord(c); onChordClick?.(c) }} />}
|
||||
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user