{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "blog-06",
  "title": "Blog 06",
  "description": "A simple blog block",
  "files": [
    {
      "path": "src/registry/blocks/radix/blog-06/components/blog.tsx",
      "content": "import { ArrowRight, CalendarDays, Dot, Mails, User } from \"lucide-react\";\nimport Link from \"next/link\";\nimport { Badge } from \"@/registry/bases/radix/ui/badge\";\nimport { Button } from \"@/registry/bases/radix/ui/button\";\nimport { Separator } from \"@/registry/bases/radix/ui/separator\";\n\nconst blogPosts = [\n  {\n    title: \"Understanding React Server Components\",\n    link: \"https://example.com/blog/react-server-components\",\n    publishedDate: \"2025-06-18\",\n    author: \"Jane Doe\",\n    image:\n      \"https://cdn.pixabay.com/photo/2021/08/27/18/50/water-6579313_1280.jpg\",\n    tags: [\"React\", \"Server Components\", \"Performance\"],\n  },\n  {\n    title: \"10 Useful Shadcn UI Components You Should Know\",\n    link: \"https://example.com/blog/shadcn-ui-components\",\n    publishedDate: \"2025-05-30\",\n    author: \"Akash Moradiya\",\n    image:\n      \"https://cdn.pixabay.com/photo/2020/02/13/06/49/seascape-4844697_1280.jpg\",\n    tags: [\"Shadcn UI\", \"Components\", \"Design\"],\n  },\n  {\n    title: \"Building a Personal Blog with Next.js and Contentlayer\",\n    link: \"https://example.com/blog/nextjs-contentlayer-blog\",\n    publishedDate: \"2025-05-15\",\n    author: \"Chris Moore\",\n    image:\n      \"https://cdn.pixabay.com/photo/2021/08/13/12/51/sea-6543041_1280.jpg\",\n    tags: [\"Next.js\", \"Contentlayer\", \"Blog\"],\n  },\n  {\n    title: \"The Complete Guide to TypeScript for Beginners\",\n    link: \"https://example.com/blog/typescript-beginners-guide\",\n    publishedDate: \"2025-04-25\",\n    author: \"Emily Johnson\",\n    image:\n      \"https://cdn.pixabay.com/photo/2017/06/22/20/24/dewdrops-2432391_1280.jpg\",\n    tags: [\"TypeScript\", \"Guide\"],\n  },\n  {\n    title: \"Optimizing Web Performance with Next.js\",\n    link: \"https://example.com/blog/nextjs-performance\",\n    publishedDate: \"2025-04-10\",\n    author: \"Akash Moradiya\",\n    image:\n      \"https://cdn.pixabay.com/photo/2013/07/21/13/00/rose-165819_1280.jpg\",\n    tags: [\"Next.js\", \"Performance\", \"Optimization\"],\n  },\n  {\n    title: \"Deploying Full-Stack Apps on Vercel with Supabase\",\n    link: \"https://example.com/blog/vercel-supabase-deployment\",\n    publishedDate: \"2025-03-28\",\n    author: \"John Smith\",\n    image:\n      \"https://cdn.pixabay.com/photo/2021/08/12/10/38/mountains-6540497_1280.jpg\",\n    tags: [\"Supabase\", \"Deployment\", \"Full-Stack\"],\n  },\n];\n\nconst formatDate = (date: string) => {\n  return new Date(date).toLocaleDateString(\"en-US\", {\n    month: \"long\",\n    day: \"numeric\",\n    year: \"numeric\",\n  });\n};\n\nexport default function Blog() {\n  return (\n    <section className=\"mx-auto max-w-7xl px-6 py-16\">\n      {/* Header */}\n      <div className=\"flex items-end justify-between gap-4\">\n        <div>\n          <h2 className=\"text-balance font-medium text-2xl tracking-tight\">\n            Welcome to our blog!\n          </h2>\n          <p className=\"mt-0.5 text-pretty text-lg text-muted-foreground tracking-normal\">\n            Stay updated with the latest news and insights.\n          </p>\n        </div>\n        <Button\n          className=\"hidden gap-3 sm:inline-flex\"\n          size=\"lg\"\n          variant=\"secondary\"\n        >\n          <Mails />\n          <span className=\"hidden lg:inline\">Subscribe to our newsletter</span>\n          <span className=\"hidden md:inline lg:hidden\">Subscribe</span>\n        </Button>\n      </div>\n\n      <Separator className=\"mt-7 mb-10\" />\n\n      <div className=\"grid grid-cols-1 gap-x-8 gap-y-14 md:grid-cols-2 lg:grid-cols-3\">\n        {blogPosts.map((post) => (\n          <Link href={post.link} key={post.link}>\n            <div className=\"overflow-hidden rounded-xl bg-muted p-2 pb-4\">\n              <div className=\"relative isolate\">\n                <img\n                  alt={post.title}\n                  className=\"aspect-[14/9] rounded-lg bg-muted\"\n                  src={post.image}\n                />\n                <img\n                  alt={post.title}\n                  className=\"absolute inset-0 -z-10 aspect-17/9 scale-y-110 rounded bg-muted blur-2xl\"\n                  src={post.image}\n                />\n              </div>\n              <div className=\"px-2 py-1\">\n                <div className=\"-ms-0.5 mt-4 flex flex-wrap items-center gap-2\">\n                  {post.tags.map((tag) => (\n                    <Badge\n                      className=\"bg-indigo-600/10 text-indigo-500 dark:bg-indigo-500/35 dark:text-indigo-300\"\n                      key={tag}\n                      variant=\"secondary\"\n                    >\n                      {tag}\n                    </Badge>\n                  ))}\n                </div>\n                <h3 className=\"mt-4 font-medium text-xl tracking-[-0.015em]\">\n                  {post.title}\n                </h3>\n                <div className=\"mt-3 flex items-center gap-1\">\n                  <div className=\"flex items-center gap-1.5 text-muted-foreground text-sm\">\n                    <CalendarDays className=\"h-4 w-4\" />{\" \"}\n                    {formatDate(post.publishedDate)}\n                  </div>\n                  <Dot className=\"text-muted-foreground\" />\n                  <div className=\"flex items-center gap-1.5 text-muted-foreground text-sm\">\n                    <User className=\"h-4 w-4\" /> {post.author}\n                  </div>\n                </div>\n\n                <Button className=\"mt-6\">\n                  Read Article <ArrowRight className=\"h-4 w-4\" />\n                </Button>\n              </div>\n            </div>\n          </Link>\n        ))}\n      </div>\n\n      <Button className=\"mx-auto mt-16 flex\" size=\"lg\" variant=\"secondary\">\n        Load more articles\n      </Button>\n    </section>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:block"
}