vibeasite-templates/template-music
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Seed: music template (13 files)

Browse Source
This commit is contained in:
jyswee
2026-07-23 23:00:02 +00:00
parent efd68cc762
commit 87c268d28e
1 changed files with 2 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/About.tsx
+2 -2
View File
@@ -94,7 +94,7 @@ export default function AboutPage() {
<h2 className="text-3xl font-bold text-center mb-12 animate-fade-up">Gallery</h2> <h2 className="text-3xl font-bold text-center mb-12 animate-fade-up">Gallery</h2>
<div className="grid grid-cols-2 md:grid-cols-3 gap-4 stagger"> <div className="grid grid-cols-2 md:grid-cols-3 gap-4 stagger">
{gallery.map((img, i) => ( {gallery.map((img, i) => (
<button key={i} onClick={() => setLightbox(i)} className={`aspect-square rounded-xl bg-gradient-to-br \${img.gradient} hover:scale-[1.02] transition-transform duration-300 cursor-pointer focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 focus:ring-offset-slate-950`} aria-label={img.alt} /> <button key={i} onClick={() => setLightbox(i)} className={`aspect-square rounded-xl bg-gradient-to-br ${img.gradient} hover:scale-[1.02] transition-transform duration-300 cursor-pointer focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 focus:ring-offset-slate-950`} aria-label={img.alt} />
))} ))}
</div> </div>
</div> </div>
@@ -105,7 +105,7 @@ export default function AboutPage() {
<div className="fixed inset-0 z-50 bg-black/90 flex items-center justify-center p-6" onClick={() => setLightbox(null)}> <div className="fixed inset-0 z-50 bg-black/90 flex items-center justify-center p-6" onClick={() => setLightbox(null)}>
<Button variant="ghost" size="icon" className="absolute top-4 right-4 text-white hover:bg-white/10" onClick={() => setLightbox(null)}><X className="h-6 w-6" /></Button> <Button variant="ghost" size="icon" className="absolute top-4 right-4 text-white hover:bg-white/10" onClick={() => setLightbox(null)}><X className="h-6 w-6" /></Button>
<Button variant="ghost" size="icon" className="absolute left-4 top-1/2 -translate-y-1/2 text-white hover:bg-white/10" onClick={(e) => { e.stopPropagation(); setLightbox((lightbox - 1 + gallery.length) % gallery.length); }}><ChevronLeft className="h-6 w-6" /></Button> <Button variant="ghost" size="icon" className="absolute left-4 top-1/2 -translate-y-1/2 text-white hover:bg-white/10" onClick={(e) => { e.stopPropagation(); setLightbox((lightbox - 1 + gallery.length) % gallery.length); }}><ChevronLeft className="h-6 w-6" /></Button>
<div className={`w-full max-w-2xl aspect-square rounded-2xl bg-gradient-to-br \${gallery[lightbox].gradient}`} onClick={(e) => e.stopPropagation()} /> <div className={`w-full max-w-2xl aspect-square rounded-2xl bg-gradient-to-br ${gallery[lightbox].gradient}`} onClick={(e) => e.stopPropagation()} />
<Button variant="ghost" size="icon" className="absolute right-4 top-1/2 -translate-y-1/2 text-white hover:bg-white/10" onClick={(e) => { e.stopPropagation(); setLightbox((lightbox + 1) % gallery.length); }}><ChevronRight className="h-6 w-6" /></Button> <Button variant="ghost" size="icon" className="absolute right-4 top-1/2 -translate-y-1/2 text-white hover:bg-white/10" onClick={(e) => { e.stopPropagation(); setLightbox((lightbox + 1) % gallery.length); }}><ChevronRight className="h-6 w-6" /></Button>
<div className="absolute bottom-6 text-center text-sm text-slate-400">{gallery[lightbox].alt} &mdash; {lightbox + 1} / {gallery.length}</div> <div className="absolute bottom-6 text-center text-sm text-slate-400">{gallery[lightbox].alt} &mdash; {lightbox + 1} / {gallery.length}</div>
</div> </div>