Add sort + pagination controls for blog and tag overviews

2025-11-17 21:20:08 +08:00
parent b47549437a
commit 1fc34e2ef6
3 changed files with 136 additions and 12 deletions
--- a/components/post-list-with-controls.tsx
+++ b/components/post-list-with-controls.tsx
@@ -0,0 +1,132 @@
+'use client';
+
+import { useMemo, useState } from 'react';
+import type { Post } from 'contentlayer/generated';
+import { siteConfig } from '@/lib/config';
+import { PostListItem } from './post-list-item';
+
+interface Props {
+  posts: Post[];
+  pageSize?: number;
+}
+
+type SortOrder = 'new' | 'old';
+
+export function PostListWithControls({ posts, pageSize }: Props) {
+  const [sortOrder, setSortOrder] = useState<SortOrder>('new');
+  const [page, setPage] = useState(1);
+
+  const size = pageSize ?? siteConfig.postsPerPage ?? 5;
+
+  const sortedPosts = useMemo(() => {
+    const arr = [...posts];
+    arr.sort((a, b) => {
+      const aDate = a.published_at
+        ? new Date(a.published_at).getTime()
+        : 0;
+      const bDate = b.published_at
+        ? new Date(b.published_at).getTime()
+        : 0;
+      return sortOrder === 'new' ? bDate - aDate : aDate - bDate;
+    });
+    return arr;
+  }, [posts, sortOrder]);
+
+  const totalPages = Math.max(1, Math.ceil(sortedPosts.length / size));
+  const currentPage = Math.min(page, totalPages);
+  const start = (currentPage - 1) * size;
+  const currentPosts = sortedPosts.slice(start, start + size);
+
+  const handleChangeSort = (order: SortOrder) => {
+    setSortOrder(order);
+    setPage(1);
+  };
+
+  const goToPage = (p: number) => {
+    if (p < 1 || p > totalPages) return;
+    setPage(p);
+  };
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center justify-between gap-4 text-xs text-slate-500 dark:text-slate-400">
+        <div className="flex items-center gap-2">
+          <span>排序：</span>
+          <button
+            type="button"
+            onClick={() => handleChangeSort('new')}
+            className={`rounded-full px-2 py-0.5 ${
+              sortOrder === 'new'
+                ? 'bg-blue-600 text-white dark:bg-blue-500'
+                : 'bg-slate-100 text-slate-600 hover:bg-slate-200 dark:bg-slate-800 dark:text-slate-300 dark:hover:bg-slate-700'
+            }`}
+          >
+            新到舊
+          </button>
+          <button
+            type="button"
+            onClick={() => handleChangeSort('old')}
+            className={`rounded-full px-2 py-0.5 ${
+              sortOrder === 'old'
+                ? 'bg-blue-600 text-white dark:bg-blue-500'
+                : 'bg-slate-100 text-slate-600 hover:bg-slate-200 dark:bg-slate-800 dark:text-slate-300 dark:hover:bg-slate-700'
+            }`}
+          >
+            舊到新
+          </button>
+        </div>
+        <div>
+          第 {currentPage} / {totalPages} 頁
+        </div>
+      </div>
+
+      <ul className="space-y-3">
+        {currentPosts.map((post) => (
+          <PostListItem key={post._id} post={post} />
+        ))}
+      </ul>
+
+      {totalPages > 1 && (
+        <nav className="flex items-center justify-center gap-3 text-xs text-slate-600 dark:text-slate-300">
+          <button
+            type="button"
+            onClick={() => goToPage(currentPage - 1)}
+            disabled={currentPage === 1}
+            className="rounded border border-slate-200 px-2 py-1 disabled:opacity-40 dark:border-slate-700"
+          >
+            上一頁
+          </button>
+          <div className="flex items-center gap-1">
+            {Array.from({ length: totalPages }).map((_, i) => {
+              const p = i + 1;
+              const isActive = p === currentPage;
+              return (
+                <button
+                  key={p}
+                  type="button"
+                  onClick={() => goToPage(p)}
+                  className={`h-7 w-7 rounded text-xs ${
+                    isActive
+                      ? 'bg-blue-600 text-white dark:bg-blue-500'
+                      : 'hover:bg-slate-100 dark:hover:bg-slate-800'
+                  }`}
+                >
+                  {p}
+                </button>
+              );
+            })}
+          </div>
+          <button
+            type="button"
+            onClick={() => goToPage(currentPage + 1)}
+            disabled={currentPage === totalPages}
+            className="rounded border border-slate-200 px-2 py-1 disabled:opacity-40 dark:border-slate-700"
+          >
+            下一頁
+          </button>
+        </nav>
+      )}
+    </div>
+  );
+}
+