{"$schema":"https://ui.shadcn.com/schema/registry-item.json","type":"registry:block","registryDependencies":["@efferd/full-width-divider"],"name":"blogs-1","description":"Minimalist list with dashed dividers.","categories":["blogs"],"files":[{"path":"registry/blocks/blogs/1/index.tsx","target":"~/components/blogs-section.tsx","type":"registry:component","content":"import { cn } from \"@/lib/utils\";\nimport { FullWidthDivider } from \"@/components/full-width-divider\";\n\nconst blogs = [\n\t{\n\t\ttitle: \"The New Design\",\n\t\tdate: \"May 20 2025\",\n\t\tdescription:\n\t\t\t\"What everyone new to the field should know, and how we can help.\",\n\t\thref: \"#\",\n\t},\n\t{\n\t\ttitle: \"Letter Club\",\n\t\tdate: \"Aug 14 2025\",\n\t\tdescription: \"An ode to the slow web.\",\n\t\thref: \"#\",\n\t},\n\t{\n\t\ttitle: \"Have the Coffee\",\n\t\tdate: \"Sep 19 2025\",\n\t\tdescription: \"Carve space out for oppurtunity.\",\n\t\thref: \"#\",\n\t},\n\t{\n\t\ttitle: \"Shadcn UI\",\n\t\tdate: \"Oct 12 2025\",\n\t\tdescription: \"Building modern applications with reusable components.\",\n\t\thref: \"#\",\n\t},\n\t{\n\t\ttitle: \"Fesgin\",\n\t\tdate: \"Nov 23 2025\",\n\t\tdescription: \"Exploring the intersection of design and development.\",\n\t\thref: \"#\",\n\t},\n];\n\nexport function BlogsSection() {\n\treturn (\n\t\t<div className=\"mx-auto flex min-h-screen w-full max-w-3xl flex-col justify-start md: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\n\t\t\t<div className=\"relative\">\n\t\t\t\t<FullWidthDivider />\n\t\t\t\t<div className=\"divide-y\">\n\t\t\t\t\t{blogs.map((blog) => (\n\t\t\t\t\t\t<BlogCard {...blog} key={blog.title} />\n\t\t\t\t\t))}\n\t\t\t\t</div>\n\t\t\t\t<FullWidthDivider />\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n\nfunction BlogCard({\n\ttitle,\n\tdate,\n\tdescription,\n\tclassName,\n\t...props\n}: React.ComponentProps<\"a\"> & {\n\ttitle: string;\n\tdate: string;\n\tdescription: string;\n}) {\n\treturn (\n\t\t<a\n\t\t\tclassName={cn(\n\t\t\t\t\"group flex h-24 w-full flex-col justify-center gap-y-1 p-4 hover:cursor-pointer hover:bg-accent/30 active:bg-accent dark:active:bg-accent/50\",\n\t\t\t\tclassName\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t<div className=\"relative flex items-end justify-center gap-2\">\n\t\t\t\t<h3 className=\"whitespace-nowrap font-medium text-foreground text-lg md:text-xl\">\n\t\t\t\t\t{title}\n\t\t\t\t</h3>\n\t\t\t\t<span className=\"mb-[6px] w-full border-b-2 border-dashed\" />\n\t\t\t\t<span className=\"whitespace-nowrap font-mono text-muted-foreground text-xs uppercase group-hover:text-foreground md:text-sm\">\n\t\t\t\t\t{date}\n\t\t\t\t</span>\n\t\t\t</div>\n\t\t\t<div className=\"max-w-sm text-muted-foreground text-sm group-hover:text-foreground md:max-w-full md:text-base\">\n\t\t\t\t{description}\n\t\t\t</div>\n\t\t</a>\n\t);\n}\n"}]}