{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "blog-03",
  "title": "Blog 03",
  "description": "A simple blog post list",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "badge",
    "card"
  ],
  "files": [
    {
      "path": "src/registry/blocks/radix/blog-03/components/blog.tsx",
      "content": "import {\n  BadgeDollarSign,\n  Bike,\n  BookHeart,\n  BriefcaseBusiness,\n  Calendar,\n  ClockIcon,\n  Cpu,\n  FlaskRound,\n  HeartPulse,\n  Scale,\n} from \"lucide-react\";\nimport Image from \"next/image\";\nimport { Badge } from \"@/registry/bases/radix/ui/badge\";\nimport { Card, CardContent } from \"@/registry/bases/radix/ui/card\";\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 adipisicing elit. Ipsa consequatur minus dicta accusantium quos, ratione suscipit id adipisci voluptatibus. Nulla sint repudiandae fugiat tenetur dolores.\",\n    readTime: \"5 min read\",\n    date: \"Nov 20, 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    description:\n      \"Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsa consequatur minus dicta accusantium quos, ratione suscipit id adipisci voluptatibus. Nulla sint repudiandae fugiat tenetur dolores.\",\n    readTime: \"8 min read\",\n    date: \"Nov 18, 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    description:\n      \"Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsa consequatur minus dicta accusantium quos, ratione suscipit id adipisci voluptatibus. Nulla sint repudiandae fugiat tenetur dolores.\",\n    readTime: \"6 min read\",\n    date: \"Nov 15, 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    description:\n      \"Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsa consequatur minus dicta accusantium quos, ratione suscipit id adipisci voluptatibus. Nulla sint repudiandae fugiat tenetur dolores.\",\n    readTime: \"10 min read\",\n    date: \"Nov 12, 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    description:\n      \"Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsa consequatur minus dicta accusantium quos, ratione suscipit id adipisci voluptatibus. Nulla sint repudiandae fugiat tenetur dolores.\",\n    readTime: \"12 min read\",\n    date: \"Nov 10, 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    description:\n      \"Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsa consequatur minus dicta accusantium quos, ratione suscipit id adipisci voluptatibus. Nulla sint repudiandae fugiat tenetur dolores.\",\n    readTime: \"7 min read\",\n    date: \"Nov 8, 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    description:\n      \"Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsa consequatur minus dicta accusantium quos, ratione suscipit id adipisci voluptatibus. Nulla sint repudiandae fugiat tenetur dolores.\",\n    readTime: \"9 min read\",\n    date: \"Nov 5, 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    description:\n      \"Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsa consequatur minus dicta accusantium quos, ratione suscipit id adipisci voluptatibus. Nulla sint repudiandae fugiat tenetur dolores.\",\n    readTime: \"11 min read\",\n    date: \"Nov 2, 2024\",\n    image:\n      \"https://cdn.pixabay.com/photo/2017/08/30/12/45/girl-2696947_1280.jpg\",\n  },\n];\n\nconst categories = [\n  {\n    name: \"Technology\",\n    totalPosts: 10,\n    icon: Cpu,\n  },\n  {\n    name: \"Business\",\n    totalPosts: 5,\n    icon: BriefcaseBusiness,\n  },\n  {\n    name: \"Finance\",\n    totalPosts: 8,\n    icon: BadgeDollarSign,\n  },\n  {\n    name: \"Health\",\n    totalPosts: 12,\n    icon: HeartPulse,\n  },\n  {\n    name: \"Lifestyle\",\n    totalPosts: 15,\n    icon: BookHeart,\n  },\n  {\n    name: \"Politics\",\n    totalPosts: 20,\n    icon: Scale,\n  },\n  {\n    name: \"Science\",\n    totalPosts: 25,\n    icon: FlaskRound,\n  },\n  {\n    name: \"Sports\",\n    totalPosts: 30,\n    icon: Bike,\n  },\n];\n\nconst Blog = () => {\n  return (\n    <div className=\"mx-auto flex max-w-(--breakpoint-xl) flex-col items-start gap-12 px-6 py-10 lg:flex-row lg:py-16 xl:px-0\">\n      <div>\n        <div className=\"space-y-12\">\n          {blogPosts.map((post) => (\n            <Card\n              className=\"flex flex-col overflow-hidden rounded-md border-none bg-background py-0 shadow-none sm:flex-row sm:items-center\"\n              key={post.title}\n            >\n              <div className=\"relative aspect-video shrink-0 grow overflow-hidden rounded-lg sm:aspect-square sm:w-56\">\n                <Image\n                  alt={post.title}\n                  className=\"object-cover\"\n                  fill\n                  sizes=\"(max-width: 640px) 100vw, 224px\"\n                  src={post.image}\n                />\n              </div>\n              <CardContent className=\"flex flex-col px-0 py-0 sm:px-6\">\n                <div className=\"flex items-center gap-6\">\n                  <Badge className=\"bg-primary/5 text-primary shadow-none hover:bg-primary/5\">\n                    {post.category}\n                  </Badge>\n                </div>\n\n                <h3 className=\"mt-4 font-medium text-[1.5rem] tracking-tight\">\n                  {post.title}\n                </h3>\n                <p className=\"mt-2 line-clamp-3 text-ellipsis text-muted-foreground\">\n                  {post.description}\n                </p>\n                <div className=\"mt-4 flex items-center gap-6 font-medium text-muted-foreground text-sm\">\n                  <div className=\"flex items-center gap-2\">\n                    <ClockIcon className=\"h-4 w-4\" /> {post.readTime}\n                  </div>\n                  <div className=\"flex items-center gap-2\">\n                    <Calendar className=\"h-4 w-4\" /> {post.date}\n                  </div>\n                </div>\n              </CardContent>\n            </Card>\n          ))}\n        </div>\n      </div>\n      <aside className=\"sticky top-8 w-full shrink-0 lg:max-w-sm\">\n        <h3 className=\"font-medium text-xl tracking-tight\">Categories</h3>\n        <div className=\"mt-4 grid gap-2 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-1\">\n          {categories.map((category) => (\n            <div\n              className=\"flex items-center justify-between gap-2 rounded-lg bg-muted bg-opacity-15 p-3 ps-4 dark:bg-muted/70 dark:bg-opacity-25\"\n              key={category.name}\n            >\n              <div className=\"flex items-center gap-3\">\n                <category.icon className=\"h-5 w-5\" />\n                <span className=\"font-medium\">{category.name}</span>\n              </div>\n              <Badge className=\"rounded-full bg-foreground/7 px-1.5 text-foreground\">\n                {category.totalPosts}\n              </Badge>\n            </div>\n          ))}\n        </div>\n      </aside>\n    </div>\n  );\n};\n\nexport default Blog;\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:block"
}