feat: category listing page with load-more pagination

components/article/LoadMoreButton.tsx

@@ -0,0 +1,66 @@
+'use client'
+
+import { useState } from 'react'
+import type { Article } from '@/lib/types'
+import ArticleCard from './ArticleCard'
+
+interface Props {
+  categorySlug: string
+  initialCount: number
+}
+
+export default function LoadMoreButton({ categorySlug, initialCount }: Props) {
+  const [articles, setArticles] = useState<Article[]>([])
+  const [offset, setOffset] = useState(initialCount)
+  const [loading, setLoading] = useState(false)
+  const [hasMore, setHasMore] = useState(true)
+
+  async function loadMore() {
+    setLoading(true)
+    try {
+      const params = new URLSearchParams({
+        'filter[status][_eq]': 'published',
+        'filter[category][slug][_eq]': categorySlug,
+        sort: '-published_at',
+        limit: '12',
+        offset: String(offset),
+        fields:
+          'id,title,slug,excerpt,featured_image,published_at,is_featured,category.id,category.name,category.slug',
+        access_token: process.env.NEXT_PUBLIC_DIRECTUS_TOKEN ?? '',
+      })
+      const res = await fetch(
+        `${process.env.NEXT_PUBLIC_DIRECTUS_URL}/items/articles?${params}`
+      )
+      const data = await res.json()
+      const newArticles: Article[] = data.data ?? []
+      setArticles((prev) => [...prev, ...newArticles])
+      setOffset((prev) => prev + newArticles.length)
+      if (newArticles.length < 12) setHasMore(false)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <>
+      {articles.length > 0 && (
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 mt-4">
+          {articles.map((article) => (
+            <ArticleCard key={article.id} article={article} />
+          ))}
+        </div>
+      )}
+      {hasMore && (
+        <div className="flex justify-center mt-8 pb-8">
+          <button
+            onClick={loadMore}
+            disabled={loading}
+            className="bg-bg-card border border-border text-text-secondary text-sm font-medium px-6 py-2.5 rounded-sm hover:border-accent hover:text-accent transition-colors disabled:opacity-50"
+          >
+            {loading ? 'Loading…' : 'Load more'}
+          </button>
+        </div>
+      )}
+    </>
+  )
+}