admin/DoC
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: arreglar errores menores y ajustes visuales

Browse Source
This commit is contained in:
Alexis
2026-03-26 13:06:19 +01:00
parent 11f3fb1415
commit 62070970c8
8 changed files with 175 additions and 231 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/BlankCardsCounter.jsx
+39 -24
View File
@@ -1,36 +1,51 @@
export default function BlankCardsCounter({ index, blankCardsCount, handleBlankCardChange }) {
const maxCardsPerRow = 7;
const rows = [];
for (let i = 0; i < blankCardsCount; i += maxCardsPerRow) {
rows.push(Array.from({ length: Math.min(maxCardsPerRow, blankCardsCount - i) }));
}
return (
<div className="flex flex-col items-center relative mx-1 mb-10">
<div className="flex flex-col items-center mx-1 my-2 z-10 w-32">
<div className="absolute w-full h-1 bg-slate-200 top-[40%] -translate-y-1/2 -z-10 rounded"></div>
{/* Botones de - y + */}
<div className="flex items-center gap-1 bg-white px-2 py-1.5 rounded-full shadow-sm border border-slate-200 z-10">
<button
onClick={() => handleBlankCardChange(index, -1)}
className="w-7 h-7 flex items-center justify-center rounded-full bg-slate-50 hover:bg-slate-200 text-slate-600 font-bold transition-colors"
>-</button>
<div className="relative w-full h-52 flex flex-col items-center justify-center shrink-0">
<div className="flex flex-col items-center leading-none min-w-[3rem]">
<span className="text-[9px] font-bold text-slate-400 uppercase tracking-widest mb-1">Blancas</span>
<span className="text-base font-black text-blue-600">{blankCardsCount}</span>
{/* Línea conectora horizontal */}
<div className="absolute w-[calc(100%+2rem)] h-1 bg-slate-200 top-[50%] -translate-y-1/2 z-0 rounded"></div>
{/* Botones - y + */}
<div className="flex items-center gap-1 bg-white px-2 py-1.5 rounded-full shadow-sm border border-slate-200 z-10 relative">
<button
onClick={() => handleBlankCardChange(index, -1)}
className="w-7 h-7 flex items-center justify-center rounded-full bg-slate-50 hover:bg-slate-200 text-slate-600 font-bold transition-colors"
>-</button>
<div className="flex flex-col items-center leading-none min-w-[3rem]">
<span className="text-[9px] font-bold text-slate-400 uppercase tracking-widest mb-1">Blancas</span>
<span className="text-base font-black text-blue-600">{blankCardsCount}</span>
</div>
<button
onClick={() => handleBlankCardChange(index, 1)}
className="w-7 h-7 flex items-center justify-center rounded-full bg-slate-50 hover:bg-slate-200 text-slate-600 font-bold transition-colors"
>+</button>
</div>
<button
onClick={() => handleBlankCardChange(index, 1)}
className="w-7 h-7 flex items-center justify-center rounded-full bg-slate-50 hover:bg-slate-200 text-slate-600 font-bold transition-colors"
>+</button>
</div>
{/* Cartas blancas */}
{blankCardsCount > 0 && (
<div className="absolute top-[75px] flex flex-row items-center -space-x-4">
{Array.from({ length: blankCardsCount }).map((_, i) => (
<div
key={i}
className="w-8 h-12 bg-white border-2 border-dashed border-slate-300 rounded shadow-sm opacity-90 transition-all hover:-translate-y-1"
style={{ zIndex: i }}
></div>
<div className="flex flex-col items-center gap-y-3 w-full justify-center -mt-16 relative z-0">
{rows.map((row, rowIndex) => (
<div key={rowIndex} className="flex flex-row items-center justify-center -space-x-4">
{row.map((_, colIndex) => (
<div
key={`${rowIndex}-${colIndex}`}
className="w-8 h-12 bg-white border-2 border-dashed border-slate-300 rounded shadow-sm opacity-90 transition-all hover:-translate-y-1"
style={{ zIndex: colIndex }}
></div>
))}
</div>
))}
</div>
)}