{children}
),
// @ts-ignore
card: ({ children, title, icon, color = 'blue' }) => {
const IconComponent = ICONS[icon] || Info;
const bgClass = `bg-${color}-50 dark:bg-${color}-900/20`;
const iconBgClass = `bg-${color}-100 dark:bg-${color}-900/40`;
const textClass = `text-${color}-600 dark:text-${color}-400`;
// Fallback if dynamic classes don't work due to Tailwind JIT
// We can map specific colors or just use style for now or ensuring safelist
// For safety, let's map common generic styles or rely on exact strings in MD if helpful.
// Better approach: explicit map
const styles: any = {
blue: { bg: 'bg-blue-50 dark:bg-blue-900/10', iconBg: 'bg-blue-100 dark:bg-blue-900/30', text: 'text-blue-600 dark:text-blue-400', border: 'border-blue-100 dark:border-blue-900/30' },
purple: { bg: 'bg-purple-50 dark:bg-purple-900/10', iconBg: 'bg-purple-100 dark:bg-purple-900/30', text: 'text-purple-600 dark:text-purple-400', border: 'border-purple-100 dark:border-purple-900/30' },
indigo: { bg: 'bg-indigo-50 dark:bg-indigo-900/10', iconBg: 'bg-indigo-100 dark:bg-indigo-900/30', text: 'text-indigo-600 dark:text-indigo-400', border: 'border-indigo-100 dark:border-indigo-900/30' },
yellow: { bg: 'bg-yellow-50 dark:bg-yellow-900/10', iconBg: 'bg-yellow-100 dark:bg-yellow-900/30', text: 'text-yellow-700 dark:text-yellow-400', border: 'border-yellow-100 dark:border-yellow-900/30' },
};
const style = styles[color] || styles.blue;
return (
{title &&
{title}
}
{children}
{children}
, h2: ({ children }) => ({children}
), table: ({ children }) => ({children}
{textContent.length > 5 && ( )}