svrjs-nextjs-website/components/cards/BlogCards.tsx

132 lines
3.6 KiB
TypeScript
Raw Normal View History

2024-08-03 11:06:50 +02:00
import React from "react";
import Link from "next/link";
import Image from "next/image";
import { ExternalLink } from "lucide-react";
2024-08-08 11:21:56 +02:00
import { client, urlFor } from "@/lib/sanity";
import { Card, CardContent } from "../ui/card";
2024-08-08 19:23:56 +02:00
import {
Pagination,
PaginationContent,
PaginationItem,
PaginationLink,
PaginationNext,
PaginationPrevious,
} from "@/components/ui/pagination";
2024-08-20 16:28:54 +02:00
import { format } from "date-fns";
2024-08-08 11:21:56 +02:00
interface BlogPostcard {
title: string;
smallDescription: string;
currentSlug: string;
titleImage: string;
2024-08-24 06:28:25 +02:00
_createdAt: string;
2024-08-08 11:21:56 +02:00
}
2024-08-08 19:23:56 +02:00
interface BlogCardsProps {
searchParams: { page?: string };
}
const BlogCards: React.FC<BlogCardsProps> = async ({ searchParams }) => {
const cardsPerPage = 6;
const currentPage = searchParams.page ? parseInt(searchParams.page) : 1;
2024-08-08 11:21:56 +02:00
const query = `*[_type == 'blog'] | order(_createdAt desc) {
2024-08-26 18:20:10 +02:00
title,
smallDescription,
"currentSlug": slug.current,
titleImage,
_createdAt
}[${(currentPage - 1) * cardsPerPage}...${currentPage * cardsPerPage}]`;
2024-08-08 11:21:56 +02:00
2024-08-08 19:23:56 +02:00
const posts: BlogPostcard[] = await client.fetch(query);
2024-08-08 11:21:56 +02:00
2024-08-08 19:23:56 +02:00
const totalPostsQuery = `count(*[_type == 'blog'])`;
const totalPosts: number = await client.fetch(totalPostsQuery);
2024-08-08 11:21:56 +02:00
2024-08-08 19:23:56 +02:00
const totalPages = Math.ceil(totalPosts / cardsPerPage);
2024-08-03 11:06:50 +02:00
return (
2024-08-08 19:23:56 +02:00
<>
<section className="grid max-w-6xl gap-4 mx-auto sm:grid-cols-2 lg:grid-cols-3">
2024-08-20 16:28:54 +02:00
{posts.map((post, idx) => {
const formattedDate = format(
new Date(post._createdAt),
"MMMM d, yyyy"
2024-08-24 06:28:25 +02:00
);
2024-08-20 16:28:54 +02:00
2024-08-26 18:20:10 +02:00
const truncatedDescription =
post.smallDescription.length > 130
? post.smallDescription.substring(0, 130) + "..."
: post.smallDescription;
2024-08-20 16:28:54 +02:00
return (
<Card
className="group h-full w-full rounded-lg border overflow-hidden"
key={idx}
>
<Link href={`/blog/${post.currentSlug}`} className="block">
<div className="relative overflow-hidden rounded-t-lg">
<Image
src={urlFor(post.titleImage).url()}
alt={post.title}
width={500}
height={300}
priority
className="w-full object-cover transition-transform duration-200 group-hover:scale-105"
/>
2024-08-08 19:23:56 +02:00
</div>
2024-08-20 16:28:54 +02:00
<CardContent className="p-4">
<div className="flex-between mb-2 py-2">
<h3 className="text-xl font-semibold leading-tight">
{post.title}
</h3>
<div className="text-sm text-muted-foreground opacity-0 group-hover:opacity-100 duration-300">
<ExternalLink />
</div>
</div>
<p className="text-sm text-muted-foreground">
2024-08-26 18:20:10 +02:00
{truncatedDescription}
2024-08-20 16:28:54 +02:00
</p>
<p className="text-xs text-muted-foreground mt-2">
2024-08-26 18:20:10 +02:00
Published on: {formattedDate}
2024-08-20 16:28:54 +02:00
</p>
</CardContent>
</Link>
</Card>
);
})}
2024-08-08 19:23:56 +02:00
</section>
<div className="flex-center mt-12">
{totalPages > 1 && (
<Pagination>
<PaginationContent>
<PaginationItem>
{currentPage > 1 && (
<PaginationPrevious href={`?page=${currentPage - 1}`} />
)}
</PaginationItem>
{Array.from({ length: totalPages }).map((_, i) => (
<PaginationItem key={i}>
<PaginationLink
href={`?page=${i + 1}`}
isActive={currentPage === i + 1}
>
{i + 1}
</PaginationLink>
</PaginationItem>
))}
<PaginationItem>
{currentPage < totalPages && (
<PaginationNext href={`?page=${currentPage + 1}`} />
)}
</PaginationItem>
</PaginationContent>
</Pagination>
)}
</div>
</>
2024-08-03 11:06:50 +02:00
);
};
export default BlogCards;