{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "blog-02",
  "title": "Blog 02",
  "description": "A simple blog post list",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "badge",
    "button",
    "card",
    "select"
  ],
  "files": [
    {
      "path": "src/registry/blocks/radix/blog-02/components/blog.tsx",
      "content": "import { ChevronRight } from \"lucide-react\";\nimport Image from \"next/image\";\nimport { Badge } from \"@/registry/bases/radix/ui/badge\";\nimport { Button } from \"@/registry/bases/radix/ui/button\";\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: \"A beginner's guide to blockchain for engineers\",\n    description:\n      \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.\",\n    readTime: \"5 min read\",\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    description:\n      \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.\",\n    readTime: \"8 min read\",\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    description:\n      \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.\",\n    readTime: \"6 min read\",\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    description:\n      \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.\",\n    readTime: \"10 min read\",\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    description:\n      \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.\",\n    readTime: \"12 min read\",\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    description:\n      \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.\",\n    readTime: \"7 min read\",\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    description:\n      \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.\",\n    readTime: \"9 min read\",\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    description:\n      \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.\",\n    readTime: \"11 min read\",\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          Recommended 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-4 grid gap-10 sm:grid-cols-2 lg:grid-cols-3\">\n        {blogPosts.map((post) => (\n          <Card\n            className=\"gap-0 overflow-hidden rounded-lg py-0 shadow-none\"\n            key={post.title}\n          >\n            <CardHeader className=\"relative p-0\">\n              <div className=\"relative aspect-video w-full border-b\">\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=\"p-4\">\n              <div className=\"flex items-center gap-3\">\n                <Badge className=\"bg-primary/5 text-primary shadow-none hover:bg-primary/5\">\n                  {post.category}\n                </Badge>\n                <span className=\"font-medium text-muted-foreground text-xs\">\n                  {post.readTime}\n                </span>\n              </div>\n\n              <h3 className=\"mt-4 font-medium text-[1.4rem] text-xl tracking-[-0.02em]\">\n                {post.title}\n              </h3>\n              <p className=\"mt-2 text-muted-foreground\">{post.description}</p>\n\n              <Button className=\"mt-6 shadow-none\">\n                Read more <ChevronRight />\n              </Button>\n            </CardContent>\n          </Card>\n        ))}\n      </div>\n    </div>\n  );\n};\n\nexport default Blog;\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:block"
}