Blog 01

1import { ArrowRightIcon } from "lucide-react"
2 
3import { Button } from "@/components/ui/button"
4import { ArticleItem } from "@/registry/blocks/blog-01/components/article-item"
5 
6export default function Blog01() {
7  return (
8    <div className="container mx-auto flex flex-col gap-8 px-4 py-8">
9      <h2 className="ml-4 font-heading text-4xl leading-snug font-medium tracking-tight md:text-5xl">
10        Blog
11      </h2>
12 
13      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
14        {articles.map((article) => (
15          <a key={article.id} className="block h-full" href="#">
16            <ArticleItem
17              title={article.title}
18              coverUrl={article.coverUrl}
19              createdAt={article.createdAt}
20            />
21          </a>
22        ))}
23      </div>
24 
25      <div className="flex justify-center">
26        <Button className="gap-2 pr-2.5 pl-3" asChild>
27          <a href="#">
28            View All
29            <ArrowRightIcon />
30          </a>
31        </Button>
32      </div>
33    </div>
34  )
35}
36 
37type Article = {
38  id: string
39  title: string
40  coverUrl: string
41  createdAt: string
42}
43 
44const articles: Article[] = [
45  {
46    id: "1",
47    title:
48      "Apple unveils iPhone 17 Pro: Aluminum frame returns, new colors, upgraded camera",
49    coverUrl:
50      "https://images.unsplash.com/photo-1499750310107-5fef28a66643?w=800&auto=format&fit=crop&q=80",
51    createdAt: "2025-09-13",
52  },
53  {
54    id: "2",
55    title:
56      'While the world is expecting AGI, François Chollet is showing just how "naive" AI can be',
57    coverUrl:
58      "https://images.unsplash.com/photo-1504639725590-34d0984388bd?w=800&auto=format&fit=crop&q=80",
59    createdAt: "2025-04-21",
60  },
61  {
62    id: "3",
63    title:
64      "Apple introduces iPhone 16e: A powerful new model for the iPhone 16 lineup",
65    coverUrl:
66      "https://images.unsplash.com/photo-1517694712202-14dd9538aa97?w=800&auto=format&fit=crop&q=80",
67    createdAt: "2025-02-20",
68  },
69  {
70    id: "4",
71    title:
72      "Apple unveils MacBook Pro M4: Same design, base model now with 16GB RAM, priced from $1,599",
73    coverUrl:
74      "https://images.unsplash.com/photo-1555066931-4365d14bab8c?w=800&auto=format&fit=crop&q=80",
75    createdAt: "2024-10-31",
76  },
77  {
78    id: "5",
79    title:
80      "Apple unveils new Mac mini M4: Smaller, 16GB RAM on the base model, priced from $599",
81    coverUrl:
82      "https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&auto=format&fit=crop&q=80",
83    createdAt: "2024-10-31",
84// … truncated