コンパクトブログ一覧

1export function BlogCompact001() {
2  const posts = [
3    {
4      number: "01",
5      title: "デザインシステムの構築と運用ガイド",
6      excerpt:
7        "チーム全体で一貫した設計言語を共有し、プロダクトの成長に伴うデザインの断片化を防ぐための実践的なアプローチ。",
8      date: "2024.03.15",
9      category: "デザイン",
10      readTime: "8 min",
11    },
12    {
13      number: "02",
14      title: "Core Web Vitals改善の具体的な施策",
15      excerpt:
16        "LCP・FID・CLSの各指標を最適化するための技術的なアプローチとモニタリング戦略を解説。",
17      date: "2024.03.08",
18      category: "エンジニアリング",
19      readTime: "6 min",
20    },
21    {
22      number: "03",
23      title: "アクセシビリティを前提としたUI設計",
24      excerpt:
25        "WCAG 2.1に準拠したインターフェース設計の基本原則と、実装時に考慮すべきポイント。",
26      date: "2024.02.28",
27      category: "デザイン",
28      readTime: "7 min",
29    },
30    {
31      number: "04",
32      title: "マイクロインタラクションの設計原則",
33      excerpt:
34        "ユーザー体験を向上させる繊細なアニメーションとフィードバックの設計手法。",
35      date: "2024.02.20",
36      category: "デザイン",
37      readTime: "5 min",
38    },
39    {
40      number: "05",
41      title: "TypeScriptの型設計パターン",
42      excerpt:
43        "大規模プロジェクトで堅牢な型システムを構築するためのパターンとベストプラクティス。",
44      date: "2024.02.12",
45      category: "エンジニアリング",
46      readTime: "9 min",
47    },
48    {
49      number: "06",
50      title: "レスポンシブデザインの再考",
51      excerpt:
52        "コンテナクエリとモダンCSSレイアウトを活用した、次世代のレスポンシブデザイン手法。",
53      date: "2024.02.05",
54      category: "エンジニアリング",
55      readTime: "6 min",
56    },
57  ];
58
59  return (
60    <section className="bg-background py-28 border-t border-border">
61      <div className="mx-auto max-w-4xl px-4 sm:px-6 lg:px-8">
62        {/* ヘッダー */}
63        <div className="flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
64          <div>
65            <p className="text-[10px] uppercase tracking-[0.3em] text-muted-foreground">
66              Articles
67            </p>
68            <h2 className="mt-3 text-2xl font-medium tracking-wide text-foreground sm:text-3xl">
69              ジャーナル
70            </h2>
71          </div>
72          <a
73            href="#"
74            className="inline-flex items-center gap-2 text-xs uppercase tracking-[0.2em] text-muted-foreground transition-colors duration-200 hover:text-foreground"
75          >
76            すべての記事
77            <svg
78              className="h-3.5 w-3.5"
79              fill="none"
80              stroke="currentColor"
81              viewBox="0 0 24 24"
82            >
83              <path
84                strokeLinecap="round"
85                strokeLinejoin="round"
86                strokeWidth={1.5}
87                d="M17 8l4 4m0 0l-4 4m4-4H3"
88              />
89            </svg>
90          </a>
91        </div>
92
93        <div className="mt-4 h-px bg-border/40" />
94
95        {/* 記事リスト */}
96        <div className="mt-8">
97          {posts.map((post) => (
98            <a
99              key={post.number}
100              href="#"
101              className="group flex items-start gap-4 border-b border-border/40 py-5 transition-colors duration-200 sm:items-center"
102            >
103              {/* 番号 */}
104              <span className="shrink-0 text-[10px] tracking-[0.2em] text-muted-foreground/30">
105                {post.number}
106              </span>
107
108              {/* メインコンテンツ */}
109              <div className="flex flex-1 flex-col gap-2 sm:flex-row sm:items-center sm:gap-6">
110                {/* タイトル＆抜粋 */}
111                <div className="flex-1">
112                  <h3 className="text-sm font-medium tracking-wide text-foreground transition-colors duration-200 group-hover:text-muted-foreground">
113                    {post.title}
114                  </h3>
115                  <p className="mt-1 text-xs font-light leading-relaxed text-muted-foreground/60 line-clamp-1">
116                    {post.excerpt}
117                  </p>
118                </div>
119
120                {/* メタ情報 */}
121                <div className="flex shrink-0 items-center gap-3">
122                  <span className="rounded-full border border-border/60 px-2.5 py-0.5 text-[10px] tracking-[0.15em] text-muted-foreground/60">
123                    {post.category}
124                  </span>
125                  <span className="hidden text-[10px] tracking-[0.15em] text-muted-foreground/40 sm:block">
126                    {post.readTime}
127                  </span>
128                  <span className="text-[10px] tracking-[0.15em] text-muted-foreground/40">
129                    {post.date}
130                  </span>
131                </div>
132              </div>
133
134              {/* 矢印 */}
135              <svg
136                className="mt-1 h-3 w-3 shrink-0 text-muted-foreground/20 transition-colors duration-200 group-hover:text-muted-foreground sm:mt-0"
137                fill="none"
138                stroke="currentColor"
139                viewBox="0 0 24 24"
140              >
141                <path
142                  strokeLinecap="round"
143                  strokeLinejoin="round"
144                  strokeWidth={1.5}
145                  d="M9 5l7 7-7 7"
146                />
147              </svg>
148            </a>
149          ))}
150        </div>
151      </div>
152    </section>
153  );
154}