{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "article",
  "title": "Article",
  "description": "Article card and content components for displaying news, blog posts, and long-form content.",
  "registryDependencies": [
    "card",
    "button"
  ],
  "files": [
    {
      "path": "src/lib/kapwa/article/index.tsx",
      "content": "import { Card, CardImage, CardContent } from '@kapwa/card';\nimport { Button } from '@kapwa/button';\n\ntype ArticleCardItem = {\n  id: number;\n  image: string;\n  imageAlt: string;\n  category: string;\n  title: string;\n  description: string;\n  hasOverlay?: boolean;\n};\n\ntype ArticleContentSection = {\n  id: number;\n  type: 'heading' | 'paragraph';\n  level?: 1 | 2 | 3;\n  content: string;\n};\n\nconst ArticleCard = ({ article }: { article: ArticleCardItem }) => {\n  return (\n    <Card>\n      {article.hasOverlay ? (\n        <div className='relative'>\n          <CardImage src={article.image} alt={article.imageAlt} />\n          <div className='absolute inset-0 bg-linear-to-t from-black/75 to-transparent flex items-end p-6'>\n            <div className='text-white'>\n              <span className='inline-block px-2 py-1 text-xs font-medium rounded-sm bg-white/20 mb-2'>\n                {article.category}\n              </span>\n              <h3 className='text-xl font-semibold mb-2'>{article.title}</h3>\n              <p className='text-white/80'>{article.description}</p>\n            </div>\n          </div>\n        </div>\n      ) : (\n        <>\n          <CardImage src={article.image} alt={article.imageAlt} />\n          <CardContent>\n            <span className='inline-block px-2 py-1 text-xs font-medium rounded-sm bg-primary-100 text-primary-800 mb-2'>\n              {article.category}\n            </span>\n            <h3 className='text-xl font-semibold mb-2'>{article.title}</h3>\n            <p className='text-gray-800 mb-4'>{article.description}</p>\n            <Button variant='link'>Read More</Button>\n          </CardContent>\n        </>\n      )}\n    </Card>\n  );\n};\n\nconst ArticleContent = ({\n  articleContentTitle,\n  articleContent,\n}: {\n  articleContentTitle: string;\n  articleContent: ArticleContentSection[];\n}) => {\n  return (\n    <div>\n      <h3 className='font-medium mb-4'>{articleContentTitle}</h3>\n      <div className='prose max-w-none'>\n        {articleContent.map(section => {\n          if (section.type === 'heading') {\n            const HeadingTag =\n              `h${section.level}` as keyof JSX.IntrinsicElements;\n            const headingClass =\n              section.level === 1\n                ? 'text-3xl font-bold mb-4'\n                : section.level === 2\n                  ? 'text-2xl font-semibold mb-3'\n                  : 'text-xl font-semibold mb-2';\n            return (\n              <HeadingTag key={section.id} className={headingClass}>\n                {section.content}\n              </HeadingTag>\n            );\n          }\n          return (\n            <p key={section.id} className='text-gray-800 mb-4'>\n              {section.content}\n            </p>\n          );\n        })}\n      </div>\n    </div>\n  );\n};\n\nexport { ArticleCard, ArticleContent };\nexport type { ArticleCardItem, ArticleContentSection };\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}