Alexis
51 lines
2.1 KiB
React
51 lines
2.1 KiB
React
import React from 'react';
|
|
|
|
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 w-full">
|
|
|
|
{/* Bloque de botones */}
|
|
<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 shrink-0">
|
|
<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 leading-none">{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>
|
|
|
|
{/* Cartas blancas */}
|
|
{blankCardsCount > 0 && (
|
|
<div className="flex flex-col items-center gap-y-2 w-full mt-3 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>
|
|
)}
|
|
|
|
</div>
|
|
);
|
|
} |