{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "blog-02",
  "title": "Blog 02",
  "description": "A blog section with a lined grid layout.",
  "dependencies": [
    "date-fns"
  ],
  "registryDependencies": [
    "button",
    "https://lyminhnghia.github.io/r/style.json"
  ],
  "files": [
    {
      "path": "src/registry/blocks/blog-02/blog-02.tsx",
      "content": "import { ArrowRightIcon } from \"lucide-react\"\n\nimport { Button } from \"@/components/ui/button\"\nimport { ArticleItem } from \"@/registry/blocks/blog-02/components/article-item\"\n\nexport function Blog02() {\n  return (\n    <div className=\"max-w-screen overflow-x-hidden\">\n      <div className=\"container mx-auto px-4 py-8\">\n        <div className=\"border-x border-line\">\n          <h2 className=\"screen-line-top screen-line-bottom ml-4 font-heading text-4xl leading-snug font-medium tracking-tight md:text-5xl\">\n            Blog\n          </h2>\n\n          <p className=\"p-4 text-balance text-muted-foreground\">\n            A collection of articles on development, design, and ideas.\n          </p>\n\n          <div className=\"screen-line-top relative py-4\">\n            <div className=\"pointer-events-none absolute inset-0 -z-1 grid grid-cols-1 gap-4 max-sm:hidden sm:grid-cols-2 md:grid-cols-3\">\n              <div className=\"border-r border-line\" />\n              <div className=\"border-l border-line md:border-x\" />\n              <div className=\"border-l border-line max-md:hidden\" />\n            </div>\n\n            <div className=\"grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3\">\n              {articles.map((article) => (\n                <ArticleItem\n                  key={article.id}\n                  url=\"#\"\n                  title={article.title}\n                  coverUrl={article.coverUrl}\n                  createdAt={article.createdAt}\n                />\n              ))}\n            </div>\n          </div>\n\n          <div className=\"screen-line-top screen-line-bottom flex justify-center py-2\">\n            <Button className=\"gap-2 pr-2.5 pl-3\" asChild>\n              <a href=\"#\">\n                View All\n                <ArrowRightIcon />\n              </a>\n            </Button>\n          </div>\n        </div>\n      </div>\n    </div>\n  )\n}\n\ntype Article = {\n  id: string\n  title: string\n  coverUrl: string\n  createdAt: string\n}\n\nconst articles: Article[] = [\n  {\n    id: \"1\",\n    title:\n      \"Apple unveils iPhone 17 Pro: Aluminum frame returns, new colors, upgraded camera\",\n    coverUrl:\n      \"https://images.unsplash.com/photo-1499750310107-5fef28a66643?w=800&auto=format&fit=crop&q=80\",\n    createdAt: \"2025-09-13\",\n  },\n  {\n    id: \"2\",\n    title:\n      'While the world is expecting AGI, François Chollet is showing just how \"naive\" AI can be',\n    coverUrl:\n      \"https://images.unsplash.com/photo-1504639725590-34d0984388bd?w=800&auto=format&fit=crop&q=80\",\n    createdAt: \"2025-04-21\",\n  },\n  {\n    id: \"3\",\n    title:\n      \"Apple introduces iPhone 16e: A powerful new model for the iPhone 16 lineup\",\n    coverUrl:\n      \"https://images.unsplash.com/photo-1517694712202-14dd9538aa97?w=800&auto=format&fit=crop&q=80\",\n    createdAt: \"2025-02-20\",\n  },\n  {\n    id: \"4\",\n    title:\n      \"Apple unveils MacBook Pro M4: Same design, base model now with 16GB RAM, priced from $1,599\",\n    coverUrl:\n      \"https://images.unsplash.com/photo-1555066931-4365d14bab8c?w=800&auto=format&fit=crop&q=80\",\n    createdAt: \"2024-10-31\",\n  },\n  {\n    id: \"5\",\n    title:\n      \"Apple unveils new Mac mini M4: Smaller, 16GB RAM on the base model, priced from $599\",\n    coverUrl:\n      \"https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop&q=80\",\n    createdAt: \"2024-10-31\",\n  },\n  {\n    id: \"6\",\n    title:\n      \"Apple unveils iMac M4: Unchanged design, more powerful M4 chip, RAM starts at 16GB, priced from $1,299\",\n    coverUrl:\n      \"https://images.unsplash.com/photo-1516321318423-f06f85e504b3?w=800&auto=format&fit=crop&q=80\",\n    createdAt: \"2024-10-29\",\n  },\n]\n",
      "type": "registry:component"
    },
    {
      "path": "src/registry/blocks/blog-02/components/article-item.tsx",
      "content": "import { format } from \"date-fns\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport type ArticleItemProps = {\n  url: string\n  title: string\n  coverUrl: string\n  createdAt: string\n}\n\nexport function ArticleItem({\n  url,\n  title,\n  coverUrl,\n  createdAt,\n}: ArticleItemProps) {\n  return (\n    <a\n      href={url}\n      className={cn(\n        \"flex flex-col gap-2 p-2 transition-[background-color] ease-out hover:bg-accent/30\",\n        \"max-sm:screen-line-top max-sm:screen-line-bottom\",\n        \"sm:max-md:nth-[2n+1]:screen-line-top sm:max-md:nth-[2n+1]:screen-line-bottom\",\n        \"md:nth-[3n+1]:screen-line-top md:nth-[3n+1]:screen-line-bottom\"\n      )}\n    >\n      <div className=\"relative aspect-video\">\n        <img\n          src={coverUrl}\n          alt={title}\n          className=\"size-full rounded-xl object-cover\"\n        />\n        <div className=\"pointer-events-none absolute inset-0 rounded-xl ring-1 ring-black/10 ring-inset dark:ring-white/10\" />\n      </div>\n\n      <div className=\"flex flex-col gap-2 p-2\">\n        <h3 className=\"text-lg leading-tight font-medium text-balance\">\n          {title}\n        </h3>\n\n        <dl>\n          <dt className=\"sr-only\">Published on</dt>\n          <dd className=\"text-sm text-muted-foreground\">\n            <time dateTime={new Date(createdAt).toISOString()}>\n              {format(new Date(createdAt), \"MMMM d, yyyy\")}\n            </time>\n          </dd>\n        </dl>\n      </div>\n    </a>\n  )\n}\n",
      "type": "registry:component"
    }
  ],
  "categories": [
    "content",
    "blog"
  ],
  "type": "registry:block"
}