{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "blog25",
  "title": "Split Image with List",
  "description": "Two-column layout with featured image on left and article list on right. Divider-separated entries with arrow hover effects.",
  "dependencies": [
    "clsx",
    "tailwind-merge",
    "lucide-react"
  ],
  "registryDependencies": [
    "badge"
  ],
  "files": [
    {
      "path": "registry/blog25/blog25.tsx",
      "content": "\"use client\";\n\nimport { ArrowRight } from \"lucide-react\";\nimport { Badge } from \"@/components/ui/badge\";\nimport Link from \"next/link\";\nimport { cn } from \"@/lib/utils\";\n\ninterface Author {\n  name: string;\n  title?: string;\n  avatar?: {\n    src: string;\n    alt: string;\n  };\n  href?: string;\n}\n\ninterface Tag {\n  label: string;\n  href?: string;\n}\n\ninterface BlogPost {\n  image: {\n    src: string;\n    alt: string;\n  };\n  title: string;\n  summary: string;\n  date?: string;\n  readTime?: string;\n  author?: Author;\n  tags?: Tag[];\n  href?: string;\n}\n\ninterface Blog25Props {\n  badge?: {\n    label: string;\n    variant?: \"default\" | \"secondary\" | \"outline\";\n  };\n  heading?: string;\n  description?: string;\n  featuredImage?: {\n    src: string;\n    alt: string;\n  };\n  posts?: BlogPost[];\n  className?: string;\n}\n\nexport const blog25Demo: Blog25Props = {\n  badge: { label: \"Featured\", variant: \"default\" },\n  heading: \"Editor's Choice\",\n  description: \"Handpicked articles by our editorial team.\",\n  featuredImage: {\n    src: \"https://images.unsplash.com/photo-1761839259112-aaea03db3633?w=800&fit=crop\",\n    alt: \"Featured articles\",\n  },\n  posts: [\n    {\n      image: {\n        src: \"https://images.unsplash.com/photo-1761839259112-aaea03db3633?w=800&fit=crop\",\n        alt: \"Design systems\",\n      },\n      title: \"The Future of Design Systems\",\n      summary: \"How design systems are evolving.\",\n      date: \"January 15, 2026\",\n      readTime: \"8 min\",\n      author: {\n        name: \"Lisa Park\",\n        title: \"Senior Developer\",\n        avatar: {\n          src: \"https://images.unsplash.com/photo-1595429935434-f2d6f6004424?w=100&fit=crop\",\n          alt: \"Lisa Park\",\n        },\n      },\n      tags: [{ label: \"Design\", href: \"/block/post12\" }],\n      href: \"/block/post12\",\n    },\n    {\n      image: {\n        src: \"https://images.unsplash.com/photo-1761839258671-6495fdc188b3?w=800&fit=crop\",\n        alt: \"API design\",\n      },\n      title: \"Building Scalable APIs\",\n      summary: \"Best practices for API design.\",\n      date: \"January 12, 2026\",\n      readTime: \"12 min\",\n      author: {\n        name: \"David Chen\",\n        title: \"Backend Engineer\",\n        avatar: {\n          src: \"https://images.unsplash.com/photo-1613508862761-40728c924737?w=100&fit=crop\",\n          alt: \"David Chen\",\n        },\n      },\n      tags: [{ label: \"Backend\", href: \"/block/post5\" }],\n      href: \"/block/post5\",\n    },\n    {\n      image: {\n        src: \"https://images.unsplash.com/photo-1761839258575-038fef381ee7?w=800&fit=crop\",\n        alt: \"React\",\n      },\n      title: \"React Performance Optimization\",\n      summary: \"Strategies for faster apps.\",\n      date: \"January 10, 2026\",\n      readTime: \"10 min\",\n      author: {\n        name: \"Alex Turner\",\n        title: \"Frontend Lead\",\n        avatar: {\n          src: \"https://images.unsplash.com/photo-1677531427892-239e0797cf60?w=100&fit=crop\",\n          alt: \"Alex Turner\",\n        },\n      },\n      tags: [{ label: \"React\", href: \"/block/post9\" }],\n      href: \"/block/post9\",\n    },\n    {\n      image: {\n        src: \"https://images.unsplash.com/photo-1761839257946-4616bcfafec7?w=800&fit=crop\",\n        alt: \"TypeScript\",\n      },\n      title: \"Advanced TypeScript Patterns\",\n      summary: \"Make your codebase maintainable.\",\n      date: \"January 8, 2026\",\n      readTime: \"15 min\",\n      author: {\n        name: \"Maria Santos\",\n        title: \"Tech Lead\",\n        avatar: {\n          src: \"https://images.unsplash.com/photo-1731394726166-2817371bf003?w=100&fit=crop\",\n          alt: \"Maria Santos\",\n        },\n      },\n      tags: [{ label: \"TypeScript\", href: \"/block/post13\" }],\n      href: \"/block/post13\",\n    },\n  ],\n};\n\nexport function Blog25({\n  badge,\n  heading,\n  description,\n  featuredImage,\n  posts = [],\n  className,\n}: Blog25Props) {\n  return (\n    <section className={cn(\"py-16 md:py-24 w-full\", className)}>\n      <div className=\"mx-auto max-w-6xl px-4 md:px-6\">\n        <div className=\"grid gap-8 lg:grid-cols-2\">\n          <div className=\"flex flex-col\">\n            {(badge || heading || description) && (\n              <div className=\"mb-8\">\n                {badge && (\n                  <div className=\"mb-4\">\n                    <Badge variant={badge.variant ?? \"default\"}>{badge.label}</Badge>\n                  </div>\n                )}\n                {heading && <h2 className=\"text-2xl font-semibold md:text-4xl\">{heading}</h2>}\n                {description && <p className=\"mt-4 text-muted-foreground\">{description}</p>}\n              </div>\n            )}\n\n            {featuredImage && (\n              <div className=\"relative aspect-video overflow-hidden rounded-md lg:flex-1 lg:aspect-auto\">\n                <img\n                  className=\"absolute inset-0 size-full object-cover\"\n                  src={featuredImage.src}\n                  alt={featuredImage.alt}\n                />\n              </div>\n            )}\n          </div>\n\n          <div className=\"space-y-0 divide-y\">\n            {posts.map((post, index) => (\n              <article key={index} className=\"group/blog25 py-4 first:pt-0 last:pb-0\">\n                <Link href={post.href ?? \"#\"} className=\"flex items-start justify-between gap-4\">\n                  <div className=\"flex-1\">\n                    {post.tags?.[0] && (\n                      <span className=\"mb-1 block text-xs font-medium text-primary\">\n                        {post.tags[0].label}\n                      </span>\n                    )}\n                    <h3 className=\"mb-1 font-semibold transition-colors group-hover/blog25:text-primary\">\n                      {post.title}\n                    </h3>\n                    <p className=\"text-sm text-muted-foreground\">{post.summary}</p>\n                    <div className=\"mt-2 text-xs text-muted-foreground\">\n                      {post.date}\n                      {post.readTime && ` · ${post.readTime}`}\n                    </div>\n                  </div>\n                  <ArrowRight className=\"mt-1 size-4 shrink-0 text-muted-foreground transition-transform group-hover/blog25:translate-x-1 group-hover/blog25:text-primary\" />\n                </Link>\n              </article>\n            ))}\n          </div>\n        </div>\n      </div>\n    </section>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/beste/block/blog25.tsx"
    }
  ],
  "type": "registry:block"
}