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-clip">
9      <div className="container mx-auto px-4">
10        <div className="border-x border-line py-8">
11          <h2 className="screen-line-top screen-line-bottom ml-4 font-heading text-3xl font-medium tracking-tight">
12            Blog
13          </h2>
14 
15          <p className="p-4 text-base text-balance text-muted-foreground">
16            A collection of articles on development, design, ideas, and tech
17            news.
18          </p>
19 
20          <div className="screen-line-top relative py-4">
21            <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">
22              <div className="border-r border-line" />
23              <div className="border-l border-line md:border-x" />
24              <div className="border-l border-line max-md:hidden" />
25            </div>
26 
27            <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3">
28              {articles.map((article) => (
29                <ArticleItem
30                  key={article.id}
31                  url="#"
32                  title={article.title}
33                  coverUrl={article.coverUrl}
34                  createdAt={article.createdAt}
35                />
36              ))}
37            </div>
38          </div>
39 
40          <div className="screen-line-top screen-line-bottom flex justify-center py-2">
41            <Button className="gap-2 pr-2.5 pl-3" asChild>
42              <a href="#">
43                View All
44                <ArrowRightIcon />
45              </a>
46            </Button>
47          </div>
48        </div>
49      </div>
50    </div>
51  )
52}
53 
54type Article = {
55  id: string
56  title: string
57  coverUrl: string
58  createdAt: string
59}
60 
61const articles: Article[] = [
62  {
63    id: "1",
64    title:
65      "Apple unveils iPhone 17 Pro: Aluminum frame returns, new colors, upgraded camera",
66    coverUrl:
67      "https://assets.chanhdai.com/registry/images/blocks/blog-01/1.webp",
68    createdAt: "2025-09-13",
69  },
70  {
71    id: "2",
72    title:
73      'While the world is expecting AGI, François Chollet is showing just how "naive" AI can be',
74    coverUrl:
75      "https://assets.chanhdai.com/registry/images/blocks/blog-01/2.webp",
76    createdAt: "2025-04-21",
77  },
78  {
79    id: "3",
80// … truncated