refactor: rediseñar tablero de cartas en sentido horizontal, añadiendo zoom y lupa cuando hay muchas cartas para poder ver toda la escala y tener control al mismo tiempo.

This commit is contained in:
Alexis
2026-03-26 09:43:45 +01:00
parent cf838837a0
commit 11f3fb1415
4 changed files with 82 additions and 41 deletions
+5 -4
View File
@@ -1,13 +1,14 @@
export default function AddLevelButton({ handleAddLevel }) {
return (
<div className="w-72 mt-6">
<div className="flex flex-col items-center mx-2 my-4">
<button
onClick={handleAddLevel}
className="w-full h-24 border-4 border-dashed border-slate-300 rounded-xl flex flex-col items-center justify-center gap-1 text-slate-400 font-semibold hover:bg-blue-50 hover:border-blue-400 hover:text-blue-500 transition-all active:scale-[0.98]"
className="w-44 h-60 border-4 border-dashed border-slate-300 rounded-2xl flex flex-col items-center justify-center gap-2 text-slate-400 font-semibold hover:bg-blue-50 hover:border-blue-400 hover:text-blue-500 transition-all active:scale-[0.98] group"
>
<span className="text-3xl leading-none">+</span>
<span className="text-sm">Añadir Carta</span>
<span className="text-4xl font-light leading-none group-hover:scale-110 transition-transform">+</span>
<span className="text-sm uppercase tracking-widest font-bold text-center px-4">Añadir Carta</span>
</button>
<div className="h-6 mt-3"></div>
</div>
);
}