justin/guitar-teacher
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix splash cards: move hover state into proper React component

Browse Source
This commit is contained in:
Sterling Archer
2026-06-14 23:10:04 -07:00
parent 1cf02baf27
commit 5fe3826f2a
1 changed files with 37 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+37 -30
View File
@@ -1439,6 +1439,38 @@ function GuitarTuner({ onBack, onGoTuner, onGoBasics, onGoSongSearch }) {
);
}
function SplashCards({ onTuner, onBasics, onSearch }) {
const [hovered, setHovered] = useState(null);
const cards = [
{key:"tuner", icon:"🎵", title:"Tune your guitar", desc:"Get in tune before you play. Pluck a string and the tuner guides you.", action:onTuner},
{key:"basics", icon:"📖", title:"Start from basics", desc:"New to guitar? Learn step by step from the very beginning.", action:onBasics},
{key:"search", icon:"🔍", title:"Search any song", desc:"Already know the basics? Find a song and play along with the mic.", action:onSearch},
];
return (
<div style={{display:"flex",flexDirection:"column",gap:12}}>
{cards.map(({key,icon,title,desc,action})=>(
<button key={key} onClick={action}
onMouseEnter={()=>setHovered(key)}
onMouseLeave={()=>setHovered(null)}
style={{background:C.bg2,
border:"1px solid "+(hovered===key?C.sage:C.amber),
borderRadius:16,padding:"20px 22px",
cursor:"pointer",textAlign:"left",fontFamily:"sans-serif",
display:"flex",alignItems:"center",gap:18,
transition:"border-color 0.2s"}}>
<div style={{fontSize:36,flexShrink:0}}>{icon}</div>
<div style={{flex:1}}>
<div style={{fontWeight:700,fontSize:16,color:C.text,marginBottom:3}}>{title}</div>
<div style={{fontSize:13,color:C.muted,lineHeight:1.5}}>{desc}</div>
</div>
<div style={{color:hovered===key?C.sage:C.amber,fontSize:20,flexShrink:0,transition:"color 0.2s"}}>›</div>
</button>
))}
</div>
);
}
function App() {
const [splash, setSplash] = useState(true);
const [showTuner, setShowTuner] = useState(false);
@@ -1547,36 +1579,11 @@ function App() {
</p>
</div>
{(()=>{
const [hovered, setHovered] = React.useState(null);
const cards = [
{key:"tuner", icon:"🎵", title:"Tune your guitar", desc:"Get in tune before you play. Pluck a string and the tuner guides you.", action:()=>setShowTuner(true)},
{key:"basics", icon:"📖", title:"Start from basics", desc:"New to guitar? Learn step by step from the very beginning.", action:()=>go(0)},
{key:"search", icon:"🔍", title:"Search any song", desc:"Already know the basics? Find a song and play along with the mic.", action:()=>go(7)},
];
return (
<div style={{display:"flex",flexDirection:"column",gap:12}}>
{cards.map(({key,icon,title,desc,action})=>(
<button key={key} onClick={action}
onMouseEnter={()=>setHovered(key)}
onMouseLeave={()=>setHovered(null)}
style={{background:C.bg2,
border:"1px solid "+(hovered===key?C.sage:C.amber),
borderRadius:16,padding:"20px 22px",
cursor:"pointer",textAlign:"left",fontFamily:"sans-serif",
display:"flex",alignItems:"center",gap:18,
transition:"border-color 0.2s"}}>
<div style={{fontSize:36,flexShrink:0}}>{icon}</div>
<div style={{flex:1}}>
<div style={{fontWeight:700,fontSize:16,color:C.text,marginBottom:3}}>{title}</div>
<div style={{fontSize:13,color:C.muted,lineHeight:1.5}}>{desc}</div>
</div>
<div style={{color:hovered===key?C.sage:C.amber,fontSize:20,flexShrink:0,transition:"color 0.2s"}}>›</div>
</button>
))}
</div>
);
})()}
<SplashCards
onTuner={()=>setShowTuner(true)}
onBasics={()=>go(0)}
onSearch={()=>go(7)}
/>
</div>
</div>
</div>