{"$schema":"https://ui.shadcn.com/schema/registry-item.json","type":"registry:block","registryDependencies":["@efferd/full-width-divider","@efferd/grid-filler"],"name":"blogs-2","description":"Clean grid layout with bordered cards.","categories":["blogs"],"files":[{"path":"registry/blocks/blogs/2/index.tsx","target":"~/components/blogs-section.tsx","type":"registry:component","content":"import { cn } from \"@/lib/utils\";\nimport { FullWidthDivider } from \"@/components/full-width-divider\";\nimport { GridFiller } from \"@/components/grid-filler\";\n\ntype BlogType = {\n\ttitle: string;\n\tdate: string;\n\tdescription: string;\n\tcategory: string;\n\tauthor: string;\n\thref: string;\n};\n\nconst blogs: BlogType[] = [\n\t{\n\t\ttitle: \"The New Design Principles for Modern Web Apps\",\n\t\tdate: \"May 20 2025\",\n\t\tcategory: \"Design\",\n\t\tauthor: \"Sarah Chen\",\n\t\tdescription:\n\t\t\t\"We dive deep into modern UI/UX fundamentals and explore how small changes can make a massive impact on user retention.\",\n\t\thref: \"#\",\n\t},\n\t{\n\t\ttitle: \"Letter Club: An Ode to the Slow Web\",\n\t\tdate: \"Aug 14 2025\",\n\t\tcategory: \"Design\",\n\t\tauthor: \"Mike Allyn\",\n\t\tdescription:\n\t\t\t\"In a world of instant gratification, we explore the beauty of thoughtful, long-form content and meaningful connections over time.\",\n\t\thref: \"#\",\n\t},\n\t{\n\t\ttitle: \"Carve Out Space for Opportunity and Coffee\",\n\t\tdate: \"Sep 19 2025\",\n\t\tcategory: \"Productivity\",\n\t\tauthor: \"Jessica Doi\",\n\t\tdescription:\n\t\t\t\"Taking a break is work. Learn how simple rituals like a morning coffee can boost your creativity and productivity.\",\n\t\thref: \"#\",\n\t},\n\t{\n\t\ttitle: \"Building Modern Applications with Shadcn UI Components\",\n\t\tdate: \"Oct 12 2025\",\n\t\tcategory: \"Design\",\n\t\tauthor: \"Tom Cook\",\n\t\tdescription:\n\t\t\t\"A comprehensive guide to leveraging Shadcn UI to build accessible, customizable, and beautiful user interfaces with incredible speed.\",\n\t\thref: \"#\",\n\t},\n\t{\n\t\ttitle: \"Fesgin: Bridging The Gap Between Design and Code\",\n\t\tdate: \"Nov 23 2025\",\n\t\tcategory: \"Design\",\n\t\tauthor: \"David Park\",\n\t\tdescription:\n\t\t\t\"How designers and developers can collaborate more effectively to bridge the gap between creative vision and technical implementation.\",\n\t\thref: \"#\",\n\t},\n\t{\n\t\ttitle: \"The Art of Simplicity in User Interface Design\",\n\t\tdate: \"Dec 05 2025\",\n\t\tcategory: \"Minimalism\",\n\t\tauthor: \"Emma Wilson\",\n\t\tdescription:\n\t\t\t\"Discover how minimalism in design leads to clearer communication and a more intuitive user experience, focusing on what matters.\",\n\t\thref: \"#\",\n\t},\n\t{\n\t\ttitle: \"Why Web Performance Matters For Your Business Growth\",\n\t\tdate: \"Jan 18 2026\",\n\t\tcategory: \"Engineering\",\n\t\tauthor: \"Chris Martin\",\n\t\tdescription:\n\t\t\t\"We discuss techniques for improving web performance, from lazy loading to code splitting, ensuring your application runs smoothly.\",\n\t\thref: \"#\",\n\t},\n\t{\n\t\ttitle: \"Practicing Digital Well-being in an Always-On World\",\n\t\tdate: \"Feb 02 2026\",\n\t\tcategory: \"Lifestyle\",\n\t\tauthor: \"Olivia Kim\",\n\t\tdescription:\n\t\t\t\"Strategies for maintaining a healthy relationship with digital tools, setting boundaries, and ensuring technology serves us rather than consumes us.\",\n\t\thref: \"#\",\n\t},\n];\n\nexport function BlogsSection() {\n\treturn (\n\t\t<div className=\"mx-auto w-full max-w-5xl py-4 lg:border-x\">\n\t\t\t<div className=\"space-y-2 px-4 py-8 md:py-12\">\n\t\t\t\t<h1 className=\"font-semibold text-2xl tracking-wide md:text-4xl\">\n\t\t\t\t\tLatest Blogs\n\t\t\t\t</h1>\n\t\t\t\t<p className=\"text-muted-foreground text-sm\">\n\t\t\t\t\tDiscover the latest trends and insights in the world of design and\n\t\t\t\t\ttechnology.\n\t\t\t\t</p>\n\t\t\t</div>\n\t\t\t<FullWidthDivider contained={true} />\n\t\t\t<div className=\"grid grid-cols-1 gap-px bg-border sm:grid-cols-2 md:grid-cols-3\">\n\t\t\t\t{blogs.map((blog) => (\n\t\t\t\t\t<BlogCard {...blog} key={blog.title} />\n\t\t\t\t))}\n\t\t\t\t<GridFiller\n\t\t\t\t\tclassName=\"bg-background\"\n\t\t\t\t\tmdColumns={3}\n\t\t\t\t\tsmColumns={4}\n\t\t\t\t\ttotalItems={blogs.length}\n\t\t\t\t/>\n\t\t\t</div>\n\t\t\t<FullWidthDivider contained={true} />\n\t\t</div>\n\t);\n}\n\nfunction BlogCard({\n\ttitle,\n\tdate,\n\tdescription,\n\tcategory,\n\tauthor,\n\tclassName,\n\t...props\n}: React.ComponentProps<\"a\"> & BlogType) {\n\treturn (\n\t\t<a\n\t\t\tclassName={cn(\n\t\t\t\t\"group w-full bg-background px-6 py-12 text-muted-foreground hover:cursor-pointer hover:text-foreground active:bg-accent md:px-8 active:dark:bg-accent/50\",\n\t\t\t\tclassName\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t<h3 className=\"mb-3 line-clamp-2 font-medium text-foreground text-lg md:text-xl\">\n\t\t\t\t{title}\n\t\t\t</h3>\n\t\t\t<div className=\"mb-3 flex items-center gap-2\">\n\t\t\t\t<span className=\"text-muted-foreground text-xs group-hover:text-foreground\">\n\t\t\t\t\t{category}\n\t\t\t\t</span>\n\t\t\t\t<div className=\"inline-flex size-1 rounded-full bg-muted-foreground\" />\n\t\t\t\t<span className=\"text-muted-foreground text-xs group-hover:text-foreground\">\n\t\t\t\t\t{date}\n\t\t\t\t</span>\n\t\t\t</div>\n\t\t\t<p className=\"mb-8 line-clamp-3 text-muted-foreground text-sm tracking-wide group-hover:text-foreground\">\n\t\t\t\t{description}\n\t\t\t</p>\n\t\t\t<div className=\"flex items-center gap-1.5\">\n\t\t\t\tby\n\t\t\t\t<span className=\"font-medium font-mono text-foreground/80 text-xs group-hover:text-foreground md:text-sm\">\n\t\t\t\t\t{author}\n\t\t\t\t</span>\n\t\t\t</div>\n\t\t</a>\n\t);\n}\n"}]}