133 lines
4.1 KiB
TypeScript
133 lines
4.1 KiB
TypeScript
'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>
|
||
);
|
||
}
|
||
|