ミニマルブログ

1import Link from "next/link";
2
3export function BlogMinimal001() {
4  const posts = [
5    {
6      title: "Building Scalable Design Systems",
7      excerpt: "A comprehensive guide to creating design systems that grow with your team and product.",
8      date: "Jan 28, 2024",
9      category: "Design",
10    },
11    {
12      title: "The Art of Minimalist Web Design",
13      excerpt: "Less is more. Discover how simplicity can elevate your digital experiences.",
14      date: "Jan 22, 2024",
15      category: "Design",
16    },
17    {
18      title: "Performance Optimization Techniques",
19      excerpt: "Practical strategies to improve your website's speed and user experience.",
20      date: "Jan 15, 2024",
21      category: "Engineering",
22    },
23    {
24      title: "Modern CSS Architecture",
25      excerpt: "Exploring new approaches to organizing and scaling CSS in large applications.",
26      date: "Jan 10, 2024",
27      category: "Engineering",
28    },
29  ];
30
31  return (
32    <section className="bg-background py-24 border-t border-border">
33      <div className="mx-auto max-w-4xl px-4 sm:px-6 lg:px-8">
34        {/* Header */}
35        <div className="text-center">
36          <h2 className="text-2xl font-semibold tracking-wide text-foreground sm:text-3xl">
37            Journal
38          </h2>
39          <p className="mt-3 text-sm tracking-wide text-muted-foreground">
40            Thoughts on design, development, and building products
41          </p>
42        </div>
43
44        {/* Posts List */}
45        <div className="mt-16 divide-y divide-border">
46          {posts.map((post) => (
47            <article key={post.title} className="group py-8 first:pt-0 last:pb-0">
48              <Link href="#" className="block">
49                <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between sm:gap-8">
50                  <div className="flex-1">
51                    <h3 className="text-lg font-medium tracking-wide text-foreground transition-colors duration-200 group-hover:text-muted-foreground">
52                      {post.title}
53                    </h3>
54                    <p className="mt-2 text-sm leading-relaxed tracking-wide text-muted-foreground">
55                      {post.excerpt}
56                    </p>
57                  </div>
58                  <div className="flex items-center gap-4 text-xs tracking-wide text-muted-foreground/70 sm:flex-col sm:items-end sm:gap-2">
59                    <time>{post.date}</time>
60                    <span className="rounded-full border border-border px-3 py-1">
61                      {post.category}
62                    </span>
63                  </div>
64                </div>
65              </Link>
66            </article>
67          ))}
68        </div>
69
70        {/* View All Link */}
71        <div className="mt-12 text-center">
72          <Link
73            href="#"
74            className="inline-flex items-center gap-2 text-sm tracking-wide text-muted-foreground transition-colors duration-200 hover:text-foreground"
75          >
76            View all articles
77            <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
78              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M17 8l4 4m0 0l-4 4m4-4H3" />
79            </svg>
80          </Link>
81        </div>
82      </div>
83    </section>
84  );
85}