@gambito-corp/mbs-library
Version:
Librería de componentes React reutilizables - Sistema de diseño modular y escalable
112 lines (106 loc) • 8.1 kB
JSX
import React from 'react';
import Card from '../atoms/Card';
import IconButton from '../atoms/IconButton';
import Badge from '../atoms/Badge';
const SelectFlashCard = ({
flashcard,
selected = false,
onSelect,
onEdit,
onDelete,
canEdit = false,
canDelete = false,
className = '',
...props
}) => {
return (
<Card
selected={selected}
onClick={onSelect}
hoverable
className={`relative cursor-pointer flex-shrink-0 w-64 h-48 border rounded-lg shadow-md transition-all duration-200 hover:shadow-lg overflow-y-hidden hover:overflow-y-auto ${
selected ? 'bg-blue-50 border-blue-400 ring-2 ring-blue-200' : 'bg-white border-gray-200'
} ${className}`} // ← rounded-lg, shadow-md, ring para seleccionadas
{...props}
>
{/* Contenido principal - Solo pregunta como en Laravel */}
<div className={`pt-8`}>
<h2 className="font-bold text-lg">{flashcard.pregunta}</h2>
</div>
{/* Botones de acción - Posición absoluta como en Laravel */}
{(canEdit || canDelete) && (
<div className="flex justify-end space-x-1 absolute right-2 top-2 z-10">
{canEdit && (
<button
type="button"
onClick={(e) => {
e.stopPropagation();
onEdit?.(flashcard);
}}
className="px-2 py-1 bg-[#5b8080] text-white rounded hover:bg-[#4a6f6f] text-xs flex items-center gap-1"
title="Editar"
>
<img
className="w-[17px]"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAAAXNSR0IB2cksfwAAAAlwSFlzAAAAnQAAAJ0Bj3LnbgAAAKVQTFRFAAAA////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////uP3jVQAAADd0Uk5TAA0zEQWU/P+rrf6WTIT6nmsSeE0y+c8TmAyubT700BRmg2xF9nn4ofuRSESHC8bECtQwxYZHLXliBKEAAADPSURBVHicbc9fC8FQGMfx58dwsSQp5g4jJSQX3v9bkOQKnRDbhZBo7Z9zhthz9lxs6/M9Pe2AtAEQyidnQzrBi3kwCkjmCs2LF6JyWALzyDzLd+1eBjtvAg6R9TD/g1G/VNV+0XIbW6TOWxuycascYj8AcyI7L3J+8LuH2nNQHy1Xnv9dkPs3aP4Jur9Dhichy1XIdBX6u+T/qXP6cxmaFax0l2Gw7i75niQMHWuhuwxjzCd+JJgTRsKOtl47XqedMF2WesD+SGxAs+eCo5oXGpptV/4P7iMAAAAASUVORK5CYII="
alt="Boton Editar"
/>
Editar
</button>
)}
{canDelete && (
<button
type="button"
onClick={(e) => {
e.stopPropagation();
onDelete?.(flashcard);
}}
className="px-2 py-1 bg-red-500 text-white rounded hover:bg-red-600 text-xs flex items-center gap-1"
title="Eliminar"
>
<img
className="w-[17px]"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAAAXNSR0IB2cksfwAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAMxQTFRFAAAA////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////OpLhCAAAAER0Uk5TAB6guwXf7sLeSv9QZd3A6/Kp1teomuXmmYv09Yp9BG0SvxNsXiEiXU8wMU5AP2AgDXR1C/aOy8puUgbIaGnH0blHk7WaBofeAAABGklEQVR4nHXRWUsDMRAA4BldkLbrg9SDUtpla+tRpIhHPZ70l+uTWLRIK15V67rWUrT64tZ9iYybjLskigMhk3xDQjII/wQmCcqUiH6BFYEAi8aEMCGFOIqmDFEYg62y9JelQIx/qrpAgo0fxr2TFEgAmMJ3A7I45Dtm8MWAORww5LBvQB57DIW3aR/AhkANKA6zTwzO66wH4MKDGlAa5O4Zyv38rQYLvcINw5LvXGlQ9dwLhpXu/LkGvJTAJQnwARIqz+W2BrW7SothtbN4psHa9XLz53c38ER7xyadxt9ex4b28C1oxLDdVs3g2GnVjmPYRc/1fbVddML0kUg6WHqcqGbCJqynRpd1v6u3dh/xMJr2iA7Mnv+Jb5RQaBkMZdeJAAAAAElFTkSuQmCC"
alt="Boton Eliminar"
/>
Eliminar
</button>
)}
</div>
)}
{/* Overlay para usuarios sin permisos */}
{!canEdit && !canDelete && (
<div className="flex justify-end absolute right-3 top-3 gap-[10px] cursor-not-allowed">
<div className="bg-black/50 absolute w-full h-full rounded-[5px]"></div>
<button
type="button"
className="px-2 py-1 bg-[#5b8080] text-white rounded hover:bg-white hover:text-[#5b8080] text-xs flex items-center gap-1 cursor-not-allowed"
title="Editar"
disabled
>
<img
className="w-[17px]"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAAAXNSR0IB2cksfwAAAAlwSFlzAAAAnQAAAJ0Bj3LnbgAAAKVQTFRFAAAA////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////uP3jVQAAADd0Uk5TAA0zEQWU/P+rrf6WTIT6nmsSeE0y+c8TmAyubT700BRmg2xF9nn4ofuRSESHC8bECtQwxYZHLXliBKEAAADPSURBVHicbc9fC8FQGMfx58dwsSQp5g4jJSQX3v9bkOQKnRDbhZBo7Z9zhthz9lxs6/M9Pe2AtAEQyidnQzrBi3kwCkjmCs2LF6JyWALzyDzLd+1eBjtvAg6R9TD/g1G/VNV+0XIbW6TOWxuycascYj8AcyI7L3J+8LuH2nNQHy1Xnv9dkPs3aP4Jur9Dhichy1XIdBX6u+T/qXP6cxmaFax0l2Gw7i75niQMHWuhuwxjzCd+JJgTRsKOtl47XqedMF2WesD+SGxAs+eCo5oXGpptV/4P7iMAAAAASUVORK5CYII="
alt="Boton Editar"
/>
Editar
</button>
<button
type="button"
className="px-2 py-1 bg-red-500 text-white rounded hover:bg-red-600 text-xs flex items-center gap-1 cursor-not-allowed"
title="Eliminar"
disabled
>
<img
className="w-[17px]"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAAAXNSR0IB2cksfwAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAMxQTFRFAAAA////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////OpLhCAAAAER0Uk5TAB6guwXf7sLeSv9QZd3A6/Kp1teomuXmmYv09Yp9BG0SvxNsXiEiXU8wMU5AP2AgDXR1C/aOy8puUgbIaGnH0blHk7WaBofeAAABGklEQVR4nHXRWUsDMRAA4BldkLbrg9SDUtpla+tRpIhHPZ70l+uTWLRIK15V67rWUrT64tZ9iYybjLskigMhk3xDQjII/wQmCcqUiH6BFYEAi8aEMCGFOIqmDFEYg62y9JelQIx/qrpAgo0fxr2TFEgAmMJ3A7I45Dtm8MWAORww5LBvQB57DIW3aR/AhkANKA6zTwzO66wH4MKDGlAa5O4Zyv38rQYLvcINw5LvXGlQ9dwLhpXu/LkGvJTAJQnwARIqz+W2BrW7SothtbN4psHa9XLz53c38ER7xyadxt9ex4b28C1oxLDdVs3g2GnVjmPYRc/1fbVddML0kUg6WHqcqGbCJqynRpd1v6u3dh/xMJr2iA7Mnv+Jb5RQaBkMZdeJAAAAAElFTkSuQmCC"
alt="Boton Eliminar"
/>
Eliminar
</button>
</div>
)}
</Card>
);
};
export default SelectFlashCard;