ブロググリッド

1export function BlogGrid001() {
2  const posts = [
3    {
4      title: "デザインシステムの構築と運用",
5      excerpt:
6        "スケーラブルなデザインシステムを構築するためのベストプラクティスと、チームでの効率的な運用方法について解説します。",
7      date: "2024.02.01",
8      category: "デザイン",
9      readTime: "5 min",
10    },
11    {
12      title: "モダンCSSアーキテクチャ入門",
13      excerpt:
14        "CSS ModulesからTailwind CSSまで、大規模アプリケーションにおけるCSS設計の最新アプローチを比較します。",
15      date: "2024.01.28",
16      category: "エンジニアリング",
17      readTime: "8 min",
18    },
19    {
20      title: "ユーザー体験を高めるマイクロインタラクション",
21      excerpt:
22        "小さなアニメーションやフィードバックが、プロダクト全体の印象にどれほど影響するかを事例とともに紹介します。",
23      date: "2024.01.22",
24      category: "UX",
25      readTime: "4 min",
26    },
27    {
28      title: "アクセシビリティを考慮したUI設計",
29      excerpt:
30        "すべてのユーザーが快適に利用できるインターフェースを設計するための基本原則とチェックリスト。",
31      date: "2024.01.15",
32      category: "デザイン",
33      readTime: "6 min",
34    },
35    {
36      title: "パフォーマンス最適化の実践ガイド",
37      excerpt:
38        "Core Web Vitalsの改善からバンドルサイズの削減まで、実測に基づいた最適化テクニックを紹介します。",
39      date: "2024.01.10",
40      category: "エンジニアリング",
41      readTime: "7 min",
42    },
43    {
44      title: "カラーパレットの選び方",
45      excerpt:
46        "ブランドに合ったカラースキームの構築方法と、アクセシビリティを担保するコントラスト比の管理。",
47      date: "2024.01.05",
48      category: "デザイン",
49      readTime: "3 min",
50    },
51  ];
52
53  return (
54    <section className="bg-background py-28 border-t border-border">
55      <div className="mx-auto max-w-6xl px-4 sm:px-6 lg:px-8">
56        {/* ヘッダー */}
57        <div className="flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
58          <div>
59            <p className="text-[10px] uppercase tracking-[0.3em] text-muted-foreground">
60              Blog
61            </p>
62            <h2 className="mt-3 text-2xl font-medium tracking-wide text-foreground sm:text-3xl">
63              最新の記事
64            </h2>
65          </div>
66          <span className="inline-flex items-center gap-2 text-xs tracking-wide text-muted-foreground transition-colors duration-200 hover:text-foreground">
67            すべての記事を見る
68            <svg
69              className="h-3.5 w-3.5"
70              fill="none"
71              stroke="currentColor"
72              viewBox="0 0 24 24"
73            >
74              <path
75                strokeLinecap="round"
76                strokeLinejoin="round"
77                strokeWidth={1.5}
78                d="M17 8l4 4m0 0l-4 4m4-4H3"
79              />
80            </svg>
81          </span>
82        </div>
83
84        <div className="mt-4 h-px bg-border/40" />
85
86        {/* 記事グリッド */}
87        <div className="mt-12 grid grid-cols-1 gap-x-8 gap-y-12 sm:grid-cols-2 lg:grid-cols-3">
88          {posts.map((post) => (
89            <article key={post.title} className="group">
90              {/* サムネイルプレースホルダー */}
91              <div className="aspect-[16/10] overflow-hidden rounded-lg border border-border bg-muted">
92                <div className="h-full w-full bg-gradient-to-br from-foreground/5 to-foreground/10 transition-all duration-500 group-hover:from-foreground/10 group-hover:to-foreground/15" />
93              </div>
94
95              {/* メタ情報 */}
96              <div className="mt-4 flex items-center gap-3">
97                <span className="rounded-full border border-border px-3 py-0.5 text-[10px] uppercase tracking-[0.15em] text-muted-foreground">
98                  {post.category}
99                </span>
100                <span className="text-[10px] tracking-[0.15em] text-muted-foreground/50">
101                  {post.readTime}
102                </span>
103              </div>
104
105              {/* タイトル・抜粋 */}
106              <h3 className="mt-3 text-sm font-medium tracking-wide text-foreground transition-colors duration-200 group-hover:text-muted-foreground">
107                {post.title}
108              </h3>
109              <p className="mt-2 text-xs font-light leading-relaxed text-muted-foreground/70">
110                {post.excerpt}
111              </p>
112
113              {/* 日付 */}
114              <time className="mt-4 block text-[10px] tracking-[0.15em] text-muted-foreground/50">
115                {post.date}
116              </time>
117            </article>
118          ))}
119        </div>
120      </div>
121    </section>
122  );
123}