{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "blog-rectangular-images-01",
  "type": "registry:block",
  "description": "Blog posts with rectangular images",
  "registryDependencies": [
    "avatar",
    "badge"
  ],
  "files": [
    {
      "path": "creative-tim-ui/blocks/blog-rectangular-images-01/page.tsx",
      "content": "\"use client\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport { Badge } from \"@/components/ui/badge\"\n\nconst POSTS = [\n  {\n    img: \"https://images.unsplash.com/photo-1497366216548-37526070297c?w=800&auto=format&fit=crop\",\n    tag: \"Enterprise\",\n    title: \"Autodesk looks to future of 3D printing with Project\",\n    desc: \"Don't be scared of the truth because we need to restart the human foundation in truth And I love you like Kanye loves Kanye I love Rick Owens bed design but the back is too high for the beams and angle of the ceiling.\",\n    date: \"10 September 2022\",\n    author: {\n      img: \"https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=400&auto=format&fit=crop\",\n      name: \"Ryan Samuel\",\n    },\n  },\n  {\n    img: \"https://images.unsplash.com/photo-1497366811353-6870744d04b2?w=800&auto=format&fit=crop\",\n    tag: \"Startups\",\n    title: \"Lyft launching cross-platform service this week\",\n    desc: \"Don't be scared of the truth because we need to restart the human foundation in truth And I love you like Kanye loves Kanye I love Rick Owens bed design but the back is too high for the beams and angle of the ceiling.\",\n    date: \"12 September 2022\",\n    author: {\n      img: \"https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=400&auto=format&fit=crop\",\n      name: \"Nora Hazel\",\n    },\n  },\n  {\n    img: \"https://images.unsplash.com/photo-1497366754035-f200968a6e72?w=800&auto=format&fit=crop\",\n    tag: \"Trending\",\n    title: \"6 insights into the French Fashion landscape\",\n    desc: \"Don't be scared of the truth because we need to restart the human foundation in truth And I love you like Kanye loves Kanye I love Rick Owens bed design but the back is too high for the beams and angle of the ceiling.\",\n    date: \"16 September 2022\",\n    author: {\n      img: \"https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&auto=format&fit=crop\",\n      name: \"Otto Gonzalez\",\n    },\n  },\n  {\n    img: \"https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?w=800&auto=format&fit=crop\",\n    tag: \"Lifestyle\",\n    title: \"Autodesk looks to future of 3D printing with Project\",\n    desc: \"Don't be scared of the truth because we need to restart the human foundation in truth And I love you like Kanye loves Kanye I love Rick Owens bed design but the back is too high for the beams and angle of the ceiling.\",\n    date: \"18 September 2022\",\n    author: {\n      img: \"https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=400&auto=format&fit=crop\",\n      name: \"Ryan Samuel\",\n    },\n  },\n]\n\nexport default function BlogRectangularImages01() {\n  return (\n    <section className=\"py-16\">\n      <div className=\"container my-auto grid grid-cols-1 gap-8 lg:grid-cols-2\">\n        {POSTS.map(({ img, tag, title, desc, date, author }) => (\n          <div key={title} className=\"grid items-center gap-4 sm:grid-cols-2\">\n            <div className=\"h-full max-h-72 overflow-hidden rounded-lg lg:max-h-full\">\n              <img\n                src={img}\n                alt={title}\n                className=\"h-full w-full object-cover object-center\"\n              />\n            </div>\n            <div className=\"space-y-4 p-2\">\n              <Badge variant=\"secondary\">{tag}</Badge>\n              <h3 className=\"text-xl font-semibold\">{title}</h3>\n              <p className=\"text-muted-foreground text-sm\">{desc}</p>\n              <div className=\"mt-6 flex items-center gap-3 md:mt-8\">\n                <Avatar>\n                  <AvatarImage src={author.img} alt={author.name} />\n                  <AvatarFallback>{author.name.charAt(0)}</AvatarFallback>\n                </Avatar>\n                <div className=\"flex flex-col\">\n                  <p className=\"mb-1 text-sm font-semibold\">{author.name}</p>\n                  <p className=\"text-muted-foreground text-xs\">{date}</p>\n                </div>\n              </div>\n            </div>\n          </div>\n        ))}\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:page",
      "target": "app/blog-rectangular-images/page.tsx"
    }
  ],
  "meta": {
    "iframeHeight": "1000px",
    "container": "w-full bg-surface min-h-svh flex px-4 py-12 items-center md:py-20 justify-center min-w-0",
    "mobile": "component"
  },
  "categories": [
    "blog-sections"
  ]
}