import { Card, CardImage, CardContent } from '@kapwa/card'; import { Button } from '@kapwa/button'; type ArticleCardItem = { id: number; image: string; imageAlt: string; category: string; title: string; description: string; hasOverlay?: boolean; }; type ArticleContentSection = { id: number; type: 'heading' | 'paragraph'; level?: 1 | 2 | 3; content: string; }; const ArticleCard = ({ article }: { article: ArticleCardItem }) => { return ( {article.hasOverlay ? (

{article.category}

{article.title}

{article.description}

) : ( <> {article.category}

{article.title}

{article.description}

)} ); }; const ArticleContent = ({ articleContentTitle, articleContent, }: { articleContentTitle: string; articleContent: ArticleContentSection[]; }) => { return (

{articleContentTitle}

{articleContent.map(section => { if (section.type === 'heading') { const HeadingTag = `h${section.level}` as keyof JSX.IntrinsicElements; const headingClass = section.level === 1 ? 'text-3xl font-bold mb-4' : section.level === 2 ? 'text-2xl font-semibold mb-3' : 'text-xl font-semibold mb-2'; return ( {section.content} ); } return (

{section.content}

); })}

); }; export { ArticleCard, ArticleContent }; export type { ArticleCardItem, ArticleContentSection };