export const ContentCard = ({ title, description, href, badge, icon, iconColor, target = "_self" }) => { const getIconColor = (key) => { const colors = { "blue-500": "#3b82f6", "indigo-500": "#6366f1", "purple-500": "#a855f7", "green-500": "#22c55e", "orange-500": "#f97316", "pink-500": "#ec4899", "gray-500": "#6b7280", "yellow-500": "#eab308", "red-500": "#ef4444" }; return colors[key] || null; }; const iconStyle = iconColor ? { color: getIconColor(iconColor) } : {}; const cardClass = "block p-4 h-full transition-all duration-150 bg-transparent hover:bg-gray-50 dark:hover:bg-gray-800/50 rounded-md border-0 no-underline group"; const cardBody = ( <> {badge && ( {badge} )}

{icon && (

)}

{title}
{description && (
{description}
)}

); if (href) { return ( {cardBody} ); } return (
{cardBody}
); }; export const ContentCards = ({ children, columns = 3 }) => { const gridCols = { 1: "grid-cols-1", 2: "grid-cols-1 sm:grid-cols-2", 3: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3", 4: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4" }; return (
{children}
); }; ## Example Usage