{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "saas16",
  "title": "Changelog Timeline",
  "description": "Version history cards with version badges, dates, and update type labels (Feature, Improvement, Fix). Perfect for product update pages and release notes.",
  "dependencies": [
    "clsx",
    "tailwind-merge",
    "lucide-react"
  ],
  "registryDependencies": [
    "badge"
  ],
  "files": [
    {
      "path": "registry/saas16/saas16.tsx",
      "content": "\"use client\";\n\nimport { Badge } from \"@/components/ui/badge\";\nimport { cn } from \"@/lib/utils\";\n\ninterface ChangelogItem {\n  version: string;\n  date: string;\n  title: string;\n  description: string;\n  badge?: {\n    label: string;\n    variant?: \"default\" | \"secondary\" | \"outline\";\n  };\n}\n\ninterface Saas16Props {\n  badge?: {\n    label: string;\n    icon?: React.ReactNode;\n    variant?: \"default\" | \"secondary\" | \"outline\";\n  };\n  heading?: string;\n  description?: string;\n  items?: ChangelogItem[];\n  className?: string;\n}\n\nexport const saas16Demo: Saas16Props = {\n  heading: \"What's new\",\n  description: \"The latest updates and improvements to our platform.\",\n  items: [\n    {\n      version: \"2.4.0\",\n      date: \"Dec 15, 2024\",\n      title: \"Real-time collaboration\",\n      description:\n        \"Work together with your team in real-time. See cursors, selections, and changes as they happen.\",\n      badge: { label: \"Feature\", variant: \"default\" },\n    },\n    {\n      version: \"2.3.2\",\n      date: \"Dec 10, 2024\",\n      title: \"Performance improvements\",\n      description:\n        \"We've optimized our backend to reduce API response times by 40%.\",\n      badge: { label: \"Improvement\", variant: \"secondary\" },\n    },\n    {\n      version: \"2.3.1\",\n      date: \"Dec 5, 2024\",\n      title: \"Bug fixes\",\n      description:\n        \"Fixed an issue where exports would occasionally fail for large datasets.\",\n      badge: { label: \"Fix\", variant: \"outline\" },\n    },\n  ],\n};\n\nexport function Saas16({\n  badge,\n  heading,\n  description,\n  items = [],\n  className,\n}: Saas16Props) {\n  return (\n    <section className={cn(\"py-16 md:py-24 w-full\", className)}>\n      <div className=\"mx-auto max-w-5xl px-4 md:px-6\">\n        {(badge || heading || description) && (\n          <div className=\"mx-auto mb-12 max-w-2xl text-center\">\n            {badge && (\n              <div className=\"mb-4 flex justify-center\">\n                <Badge variant={badge.variant ?? \"default\"} className=\"gap-1.5\">\n                  {badge.icon}\n                  {badge.label}\n                </Badge>\n              </div>\n            )}\n            {heading && (\n              <h2 className=\"text-2xl font-bold tracking-tight md:text-4xl\">\n                {heading}\n              </h2>\n            )}\n            {description && (\n              <p className=\"mt-4 text-muted-foreground\">{description}</p>\n            )}\n          </div>\n        )}\n\n        <div className=\"mx-auto max-w-xl space-y-4\">\n          {items.map((item, index) => (\n            <div key={index} className=\"rounded-md border bg-card p-6\">\n              <div className=\"mb-4 flex flex-wrap items-center gap-3\">\n                <Badge variant=\"outline\">{item.version}</Badge>\n                {item.badge && (\n                  <Badge variant={item.badge.variant ?? \"default\"}>\n                    {item.badge.label}\n                  </Badge>\n                )}\n                <span className=\"text-sm text-muted-foreground\">\n                  {item.date}\n                </span>\n              </div>\n              <h3 className=\"mb-2 font-semibold\">{item.title}</h3>\n              <p className=\"text-sm text-muted-foreground\">{item.description}</p>\n            </div>\n          ))}\n        </div>\n      </div>\n    </section>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/beste/block/saas16.tsx"
    }
  ],
  "type": "registry:block"
}