yufan.me/src/components/page/post/PostCards.astro

63 lines
2.1 KiB
Plaintext

---
import Image from '@/components/image/Image.astro';
import LikeIcon from '@/components/like/LikeIcon.astro';
import Pagination from '@/components/page/pagination/Pagination.astro';
import { formatShowDate, slicePosts } from '@/helpers/formatter';
import { getCategory, type Post } from '@/helpers/schema';
import options from '@/options';
interface Props {
posts: Post[];
pageNum: number;
}
const { pageNum, posts } = Astro.props;
const results = slicePosts(posts, pageNum, options.settings.pagination.posts);
if (results.totalPage === 0) {
return Astro.redirect('/404');
}
const { currentPosts, totalPage } = results;
---
<div class="content-wrapper content-wrapper col-12 col-xl-9">
<div class="list-grid">
{
currentPosts.map((post) => (
<div class="list-item block">
<div class="media media-3x2 col-6 col-md-5">
<a href={post.permalink} class="media-content">
<Image {...post.cover} alt={post.title} width={600} height={400} />
</a>
<div class="media-overlay overlay-top">
<a
class="d-none d-md-inline-block badge badge-md bg-white-overlay"
href={getCategory(post.category, undefined)?.permalink || ''}
>
{post.category}
</a>
</div>
</div>
<div class="list-content">
<div class="list-body">
<a href={post.permalink} class="list-title h5">
<div class="h-2x">{post.title}</div>
</a>
<div class="d-none d-md-block list-desc text-secondary text-md mt-3">
<div class="h-2x">{post.summary ?? ''}</div>
</div>
</div>
<div class="list-footer">
<div class="d-flex flex-fill align-items-center text-muted text-sm">
<div class="flex-fill d-none d-md-block">{formatShowDate(post.date)}</div>
<LikeIcon permalink={post.permalink} />
</div>
</div>
</div>
</div>
))
}
</div>
<Pagination current={pageNum} total={totalPage} rootPath={'/'} />
</div>