Blog 02

1import { ArrowRightIcon } from "lucide-react"
2 
3import { Button } from "@/components/ui/button"
4import { ArticleItem } from "@/registry/blocks/blog-02/components/article-item"
5 
6export function Blog02() {
7  return (
8    <div className="max-w-screen overflow-x-hidden">
9      <div className="container mx-auto px-4 py-8">
10        <div className="border-x border-line">
11          <h2 className="screen-line-top screen-line-bottom ml-4 font-heading text-4xl leading-snug font-medium tracking-tight md:text-5xl">
12            Blog
13          </h2>
14 
15          <p className="p-4 text-balance text-muted-foreground">
16            A collection of articles on development, design, and ideas.
17          </p>
18 
19          <div className="screen-line-top relative py-4">
20            <div className="pointer-events-none absolute inset-0 -z-1 grid grid-cols-1 gap-4 max-sm:hidden sm:grid-cols-2 md:grid-cols-3">
21              <div className="border-r border-line" />
22              <div className="border-l border-line md:border-x" />
23              <div className="border-l border-line max-md:hidden" />
24            </div>
25 
26            <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3">
27              {articles.map((article) => (
28                <ArticleItem
29                  key={article.id}
30                  url="#"
31                  title={article.title}
32                  coverUrl={article.coverUrl}
33                  createdAt={article.createdAt}
34                />
35              ))}
36            </div>
37          </div>
38 
39          <div className="screen-line-top screen-line-bottom flex justify-center py-2">
40            <Button className="gap-2 pr-2.5 pl-3" asChild>
41              <a href="#">
42                View All
43                <ArrowRightIcon />
44              </a>
45            </Button>
46          </div>
47        </div>
48      </div>
49    </div>
50  )
51}
52 
53type Article = {
54  id: string
55  title: string
56  coverUrl: string
57  createdAt: string
58}
59 
60const articles: Article[] = [
61  {
62    id: "1",
63    title:
64      "Apple unveils iPhone 17 Pro: Aluminum frame returns, new colors, upgraded camera",
65    coverUrl:
66      "https://images.unsplash.com/photo-1499750310107-5fef28a66643?w=800&auto=format&fit=crop&q=80",
67    createdAt: "2025-09-13",
68  },
69  {
70    id: "2",
71    title:
72      'While the world is expecting AGI, François Chollet is showing just how "naive" AI can be',
73    coverUrl:
74      "https://images.unsplash.com/photo-1504639725590-34d0984388bd?w=800&auto=format&fit=crop&q=80",
75// … truncated