{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "blog-01",
  "title": "Blog 01",
  "description": "A simple blog post list",
  "registryDependencies": [
    "badge",
    "card",
    "select"
  ],
  "files": [
    {
      "path": "src/registry/blocks/radix/blog-01/components/blog.tsx",
      "content": "import Image from \"next/image\";\nimport { Badge } from \"@/registry/bases/radix/ui/badge\";\nimport { Card, CardContent, CardHeader } from \"@/registry/bases/radix/ui/card\";\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/bases/radix/ui/select\";\n\nconst blogPosts = [\n  {\n    category: \"Technology\",\n    title: \"What is the future of web development?\",\n    author: \"John Doe\",\n    authorImage:\n      \"https://images.pexels.com/photos/3785079/pexels-photo-3785079.jpeg?auto=compress&cs=tinysrgb&w=128\",\n    date: \"Nov 30, 2024\",\n    image:\n      \"https://cdn.pixabay.com/photo/2021/08/27/18/50/water-6579313_1280.jpg\",\n  },\n  {\n    category: \"Business\",\n    title: \"Understanding React Server Components\",\n    author: \"Jane Smith\",\n    authorImage:\n      \"https://images.pexels.com/photos/1520760/pexels-photo-1520760.jpeg?auto=compress&cs=tinysrgb&w=128\",\n    date: \"Nov 28, 2024\",\n    image:\n      \"https://cdn.pixabay.com/photo/2020/02/13/06/49/seascape-4844697_1280.jpg\",\n  },\n  {\n    category: \"Finance\",\n    title: \"10 Useful Shadcn UI Components You Should Know\",\n    author: \"Akash Moradiya\",\n    authorImage:\n      \"https://images.pexels.com/photos/2182970/pexels-photo-2182970.jpeg?auto=compress&cs=tinysrgb&w=128\",\n    date: \"Nov 25, 2024\",\n    image:\n      \"https://cdn.pixabay.com/photo/2021/08/13/12/51/sea-6543041_1280.jpg\",\n  },\n  {\n    category: \"Health\",\n    title: \"Building a Personal Blog with Next.js\",\n    author: \"Chris Moore\",\n    authorImage:\n      \"https://images.pexels.com/photos/2379005/pexels-photo-2379005.jpeg?auto=compress&cs=tinysrgb&w=128\",\n    date: \"Nov 22, 2024\",\n    image:\n      \"https://cdn.pixabay.com/photo/2017/06/22/20/24/dewdrops-2432391_1280.jpg\",\n  },\n  {\n    category: \"Lifestyle\",\n    title: \"The Complete Guide to TypeScript for Beginners\",\n    author: \"Emily Johnson\",\n    authorImage:\n      \"https://images.pexels.com/photos/733872/pexels-photo-733872.jpeg?auto=compress&cs=tinysrgb&w=128\",\n    date: \"Nov 20, 2024\",\n    image:\n      \"https://cdn.pixabay.com/photo/2013/07/21/13/00/rose-165819_1280.jpg\",\n  },\n  {\n    category: \"Politics\",\n    title: \"Optimizing Web Performance with Next.js\",\n    author: \"John Doe\",\n    authorImage:\n      \"https://images.pexels.com/photos/3785079/pexels-photo-3785079.jpeg?auto=compress&cs=tinysrgb&w=128\",\n    date: \"Nov 18, 2024\",\n    image:\n      \"https://cdn.pixabay.com/photo/2021/08/12/10/38/mountains-6540497_1280.jpg\",\n  },\n  {\n    category: \"Science\",\n    title: \"Deploying Full-Stack Apps on Vercel\",\n    author: \"Bob Smith\",\n    authorImage:\n      \"https://images.pexels.com/photos/91227/pexels-photo-91227.jpeg?auto=compress&cs=tinysrgb&w=128\",\n    date: \"Nov 15, 2024\",\n    image:\n      \"https://cdn.pixabay.com/photo/2016/03/27/18/54/technology-1283624_1280.jpg\",\n  },\n  {\n    category: \"Sports\",\n    title: \"Getting Started with Modern Web Development\",\n    author: \"Sarah Williams\",\n    authorImage:\n      \"https://images.pexels.com/photos/2613260/pexels-photo-2613260.jpeg?auto=compress&cs=tinysrgb&w=128\",\n    date: \"Nov 12, 2024\",\n    image:\n      \"https://cdn.pixabay.com/photo/2017/08/30/12/45/girl-2696947_1280.jpg\",\n  },\n];\n\nconst Blog = () => {\n  return (\n    <div className=\"mx-auto max-w-(--breakpoint-xl) px-6 py-16 xl:px-0\">\n      <div className=\"flex items-end justify-between\">\n        <h2 className=\"font-medium text-[1.5rem] tracking-tight\">\n          Today&apos;s Posts\n        </h2>\n        <Select defaultValue=\"recommended\">\n          <SelectTrigger className=\"w-[180px]\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectItem value=\"recommended\">Recommended</SelectItem>\n            <SelectItem value=\"latest\">Latest</SelectItem>\n            <SelectItem value=\"popular\">Popular</SelectItem>\n          </SelectContent>\n        </Select>\n      </div>\n\n      <div className=\"mt-6 grid gap-10 sm:grid-cols-2 lg:grid-cols-3\">\n        {blogPosts.map((post) => (\n          <Card className=\"gap-3 bg-muted/30 py-0 shadow-none\" key={post.title}>\n            <CardHeader className=\"p-1.5 pb-0\">\n              <div className=\"relative aspect-video w-full overflow-hidden rounded-lg\">\n                <Image\n                  alt={post.title}\n                  className=\"object-cover\"\n                  fill\n                  sizes=\"(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw\"\n                  src={post.image}\n                />\n              </div>\n            </CardHeader>\n            <CardContent className=\"px-4 pt-0 pb-5\">\n              <Badge variant=\"secondary\">{post.category}</Badge>\n\n              <h3 className=\"mt-4 font-medium text-[1.4rem] text-xl tracking-[-0.02em]\">\n                {post.title}\n              </h3>\n              <div className=\"mt-6 flex items-center justify-between\">\n                <div className=\"flex items-center gap-2\">\n                  <Image\n                    alt={post.author}\n                    className=\"size-8 rounded-full object-cover\"\n                    height={32}\n                    src={post.authorImage}\n                    width={32}\n                  />\n                  <span className=\"font-medium text-muted-foreground\">\n                    {post.author}\n                  </span>\n                </div>\n\n                <span className=\"text-muted-foreground text-sm\">\n                  {post.date}\n                </span>\n              </div>\n            </CardContent>\n          </Card>\n        ))}\n      </div>\n    </div>\n  );\n};\n\nexport default Blog;\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:block"
}