54 lines
1.1 KiB
JavaScript
54 lines
1.1 KiB
JavaScript
// Tarjeta de mensaje preventivo/informativo
|
|
|
|
export default function WarningCard({ type = 'warning', title, message }) {
|
|
const colors = {
|
|
warning: {
|
|
bg: 'rgba(245,158,11,0.07)',
|
|
border: 'rgba(245,158,11,0.2)',
|
|
title: '#f59e0b',
|
|
text: '#c9a855',
|
|
},
|
|
info: {
|
|
bg: 'rgba(61,154,255,0.07)',
|
|
border: 'rgba(61,154,255,0.2)',
|
|
title: '#3d9aff',
|
|
text: '#7aa8d4',
|
|
},
|
|
success: {
|
|
bg: 'rgba(0,212,160,0.07)',
|
|
border: 'rgba(0,212,160,0.2)',
|
|
title: '#00d4a0',
|
|
text: '#5ec8a8',
|
|
},
|
|
}
|
|
|
|
const c = colors[type] || colors.warning
|
|
|
|
return (
|
|
<div style={{
|
|
background: c.bg,
|
|
border: `1px solid ${c.border}`,
|
|
borderRadius: 12,
|
|
padding: '14px 16px',
|
|
marginBottom: 10,
|
|
}}>
|
|
<div style={{
|
|
fontSize: 12,
|
|
fontWeight: 600,
|
|
color: c.title,
|
|
marginBottom: 6,
|
|
}}>
|
|
{title}
|
|
</div>
|
|
<p style={{
|
|
fontSize: 12,
|
|
lineHeight: 1.6,
|
|
color: c.text,
|
|
margin: 0,
|
|
}}>
|
|
{message}
|
|
</p>
|
|
</div>
|
|
)
|
|
}
|