plazbot
Version:
Official Plazbot SDK for creating AI agents for WhatsApp, portals, and developers.
45 lines (44 loc) • 3.06 kB
JavaScript
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { usePlazbotContext } from '../../context/PlazbotContext';
import { resolveIcon } from '../../styles/icons';
function extractEvent(result) {
if (!result || typeof result !== 'object')
return {};
return result;
}
function formatDate(dateStr) {
if (!dateStr)
return '';
try {
return new Date(dateStr).toLocaleDateString('es', {
weekday: 'long',
day: 'numeric',
month: 'long',
year: 'numeric',
});
}
catch {
return dateStr;
}
}
export function EventCard({ action, style }) {
const { theme, iconMode } = usePlazbotContext();
const event = extractEvent(action.result);
const isCreated = action.intent?.includes('add') || action.intent?.includes('create');
return (_jsxs("div", { style: {
borderRadius: theme.borderRadius,
backgroundColor: theme.cardBg,
border: `1px solid ${theme.borderColor}`,
overflow: 'hidden',
fontFamily: theme.fontFamily,
animation: 'plazbot-scale-in 0.2s ease-out',
...style,
}, children: [_jsx("div", { style: {
display: 'flex',
alignItems: 'center',
gap: '8px',
padding: '10px 14px',
borderBottom: `1px solid ${theme.borderColor}`,
fontSize: theme.fontSizeSm,
}, children: isCreated ? (_jsxs(_Fragment, { children: [resolveIcon('check', iconMode) && _jsx("span", { style: { color: theme.successColor, fontSize: '14px' }, children: resolveIcon('check', iconMode) }), _jsx("span", { style: { fontWeight: 500, color: theme.successColor }, children: "Cita creada" })] })) : (_jsxs(_Fragment, { children: [resolveIcon('calendar', iconMode) && _jsx("span", { style: { fontSize: '14px' }, children: resolveIcon('calendar', iconMode) }), _jsx("span", { style: { fontWeight: 500, color: theme.textColor }, children: "Evento" })] })) }), _jsxs("div", { style: { padding: '12px 14px', display: 'flex', flexDirection: 'column', gap: '6px' }, children: [event.title && (_jsx("div", { style: { fontWeight: 600, fontSize: theme.fontSize, color: theme.textColor }, children: event.title })), _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '4px', fontSize: theme.fontSizeSm, color: theme.textSecondary }, children: [event.date && (_jsxs("span", { children: [resolveIcon('calendar', iconMode), " ", formatDate(event.date)] })), event.startTime && (_jsxs("span", { children: [resolveIcon('clock', iconMode), " ", event.startTime, event.endTime && ` - ${event.endTime}`] })), event.duration && (_jsxs("span", { children: [resolveIcon('clock', iconMode), " ", event.duration, " minutos"] }))] }), event.description && (_jsx("div", { style: { fontSize: theme.fontSizeSm, color: theme.textSecondary, marginTop: '2px', lineHeight: 1.4 }, children: event.description }))] })] }));
}