{
  "dashboardLayout": "interface StatCard {\n  label: string\n  value: string\n  trend?: string\n}\n\ninterface DashboardLayoutProps {\n  title?: string\n  navItems?: Array<{ label: string; icon: React.ReactNode; variant?: \"default\" | \"ghost\" }>\n  avatarUrl?: string\n  avatarFallback?: string\n  stats?: StatCard[]\n  onNotificationClick?: () => void\n}\n\nfunction DashboardLayout({ \n  title = \"Dashboard\",\n  navItems = [\n    { label: \"Overview\", icon: <House className=\"mr-2\" />, variant: \"default\" as const },\n    { label: \"Analytics\", icon: <ChartBar className=\"mr-2\" />, variant: \"ghost\" as const }\n  ],\n  avatarUrl,\n  avatarFallback = \"U\",\n  stats = [\n    { label: \"Total Revenue\", value: \"$45,231\", trend: \"+20.1% from last month\" }\n  ],\n  onNotificationClick\n}: DashboardLayoutProps) {\n  return (\n    <div className=\"min-h-screen bg-background\">\n      <div className=\"border-b border-border bg-card p-4\">\n        <div className=\"flex items-center justify-between\">\n          <h3 className=\"text-xl font-bold\">{title}</h3>\n          <div className=\"flex items-center gap-2\">\n            <Button variant=\"ghost\" size=\"icon\" onClick={onNotificationClick}>\n              <Bell />\n            </Button>\n            <Avatar className=\"h-8 w-8\">\n              {avatarUrl && <AvatarImage src={avatarUrl} />}\n              <AvatarFallback>{avatarFallback}</AvatarFallback>\n            </Avatar>\n          </div>\n        </div>\n      </div>\n      <div className=\"flex\">\n        <aside className=\"w-64 border-r border-border bg-card/30 p-4\">\n          <nav className=\"space-y-1\">\n            {navItems.map((item) => (\n              <Button \n                key={item.label}\n                variant={item.variant || \"ghost\"} \n                className=\"w-full justify-start\"\n              >\n                {item.icon}\n                {item.label}\n              </Button>\n            ))}\n          </nav>\n        </aside>\n        <main className=\"flex-1 p-6\">\n          <h1 className=\"text-3xl font-bold\">Overview</h1>\n          <div className=\"grid grid-cols-3 gap-6 mt-6\">\n            {stats.map((stat) => (\n              <Card key={stat.label} className=\"p-6\">\n                <p className=\"text-sm text-muted-foreground\">{stat.label}</p>\n                <p className=\"text-3xl font-bold mt-2\">{stat.value}</p>\n                {stat.trend && (\n                  <p className=\"text-sm text-accent mt-2\">{stat.trend}</p>\n                )}\n              </Card>\n            ))}\n          </div>\n        </main>\n      </div>\n    </div>\n  )\n}",
  "landingPage": "interface LandingPageProps {\n  brandName?: string\n  navItems?: string[]\n  badge?: string\n  headline?: string\n  description?: string\n  primaryCta?: string\n  secondaryCta?: string\n  onPrimaryCta?: () => void\n  onSecondaryCta?: () => void\n}\n\nfunction LandingPage({ \n  brandName = \"ProductName\",\n  navItems = [\"Features\", \"Sign Up\"],\n  badge = \"New Release\",\n  headline = \"Build Amazing Products Faster\",\n  description = \"The complete toolkit for modern product development.\",\n  primaryCta = \"Get Started\",\n  secondaryCta,\n  onPrimaryCta,\n  onSecondaryCta\n}: LandingPageProps) {\n  return (\n    <div className=\"min-h-screen\">\n      <div className=\"border-b border-border bg-card p-4\">\n        <div className=\"flex items-center justify-between\">\n          <div className=\"flex items-center gap-2\">\n            <div className=\"h-8 w-8 rounded-lg bg-accent\" />\n            <h3 className=\"text-xl font-bold\">{brandName}</h3>\n          </div>\n          <div className=\"flex items-center gap-2\">\n            {navItems.map((item) => (\n              <Button key={item} variant=\"ghost\" size=\"sm\">{item}</Button>\n            ))}\n          </div>\n        </div>\n      </div>\n      <div className=\"p-12 text-center bg-gradient-to-br from-primary/20 to-accent/20\">\n        <Badge className=\"mb-4\">{badge}</Badge>\n        <h1 className=\"text-5xl font-bold mb-6\">\n          {headline}\n        </h1>\n        <p className=\"text-xl text-muted-foreground mb-8 max-w-2xl mx-auto\">\n          {description}\n        </p>\n        <div className=\"flex items-center justify-center gap-4\">\n          <Button size=\"lg\" onClick={onPrimaryCta}>\n            {primaryCta}\n            <ArrowRight className=\"ml-2\" />\n          </Button>\n          {secondaryCta && (\n            <Button size=\"lg\" variant=\"outline\" onClick={onSecondaryCta}>\n              {secondaryCta}\n            </Button>\n          )}\n        </div>\n      </div>\n    </div>\n  )\n}",
  "ecommercePage": "interface EcommercePageProps {\n  storeName?: string\n  productBadge?: string\n  productName?: string\n  productPrice?: string\n  originalPrice?: string\n  onAddToCart?: () => void\n}\n\nfunction EcommercePage({ \n  storeName = \"Store\",\n  productBadge = \"New Arrival\",\n  productName = \"Premium Product\",\n  productPrice = \"$299.00\",\n  originalPrice,\n  onAddToCart\n}: EcommercePageProps) {\n  return (\n    <div className=\"min-h-screen\">\n      <div className=\"border-b border-border bg-card p-4\">\n        <div className=\"flex items-center justify-between\">\n          <h3 className=\"text-xl font-bold\">{storeName}</h3>\n          <Button variant=\"ghost\" size=\"icon\">\n            <ShoppingCart />\n          </Button>\n        </div>\n      </div>\n      <div className=\"p-8\">\n        <div className=\"grid grid-cols-2 gap-12\">\n          <div className=\"aspect-square rounded-lg bg-gradient-to-br from-primary to-accent\" />\n          <div className=\"space-y-6\">\n            <Badge>{productBadge}</Badge>\n            <h1 className=\"text-4xl font-bold\">{productName}</h1>\n            <div className=\"flex items-baseline gap-3\">\n              <span className=\"text-3xl font-bold\">{productPrice}</span>\n              {originalPrice && (\n                <span className=\"text-lg text-muted-foreground line-through\">\n                  {originalPrice}\n                </span>\n              )}\n            </div>\n            <Button size=\"lg\" className=\"w-full\" onClick={onAddToCart}>\n              <ShoppingCart className=\"mr-2\" />\n              Add to Cart\n            </Button>\n          </div>\n        </div>\n      </div>\n    </div>\n  )\n}",
  "blogArticle": "interface BlogArticleProps {\n  blogName?: string\n  tags?: string[]\n  title?: string\n  authorName?: string\n  authorAvatar?: string\n  authorFallback?: string\n  date?: string\n  readTime?: string\n  excerpt?: string\n}\n\nfunction BlogArticle({ \n  blogName = \"Blog\",\n  tags = [\"Design\", \"Tutorial\"],\n  title = \"Building a Comprehensive Component Library\",\n  authorName = \"Alex Writer\",\n  authorAvatar,\n  authorFallback = \"AW\",\n  date = \"March 15, 2024\",\n  readTime = \"10 min read\",\n  excerpt = \"Design systems have become an essential part of modern product development.\"\n}: BlogArticleProps) {\n  return (\n    <div className=\"min-h-screen\">\n      <div className=\"border-b border-border bg-card p-4\">\n        <h3 className=\"text-xl font-bold\">{blogName}</h3>\n      </div>\n      <div className=\"p-8\">\n        <div className=\"max-w-4xl mx-auto space-y-6\">\n          <div className=\"flex gap-2\">\n            {tags.map((tag, idx) => (\n              <Badge key={tag} variant={idx === 0 ? \"default\" : \"secondary\"}>\n                {tag}\n              </Badge>\n            ))}\n          </div>\n          <h1 className=\"text-5xl font-bold\">\n            {title}\n          </h1>\n          <div className=\"flex items-center gap-4\">\n            <Avatar className=\"h-12 w-12\">\n              {authorAvatar && <AvatarImage src={authorAvatar} />}\n              <AvatarFallback>{authorFallback}</AvatarFallback>\n            </Avatar>\n            <div>\n              <p className=\"font-medium\">{authorName}</p>\n              <p className=\"text-sm text-muted-foreground\">\n                {date} · {readTime}\n              </p>\n            </div>\n          </div>\n          <div className=\"aspect-video rounded-lg bg-gradient-to-br from-primary to-accent\" />\n          <p className=\"text-lg text-muted-foreground leading-relaxed\">\n            {excerpt}\n          </p>\n        </div>\n      </div>\n    </div>\n  )\n}"
}