import React from "react"; import Link from "next/link"; import Image from "next/image"; import { ExternalLink } from "lucide-react"; import { client, urlFor } from "@/lib/sanity"; import { Card, CardContent } from "../ui/card"; import { Pagination, PaginationContent, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, } from "@/components/ui/pagination"; import { format } from "date-fns"; interface BlogPostcard { title: string; smallDescription: string; currentSlug: string; titleImage: string; _createdAt: string; } interface BlogCardsProps { searchParams: { page?: string }; } const BlogCards: React.FC = async ({ searchParams }) => { const cardsPerPage = 6; const currentPage = searchParams.page ? parseInt(searchParams.page) : 1; const query = `*[_type == 'blog'] | order(_createdAt desc) { title, smallDescription, "currentSlug": slug.current, titleImage, _createdAt }[${(currentPage - 1) * cardsPerPage}...${currentPage * cardsPerPage}]`; const posts: BlogPostcard[] = await client.fetch(query); const totalPostsQuery = `count(*[_type == 'blog'])`; const totalPosts: number = await client.fetch(totalPostsQuery); const totalPages = Math.ceil(totalPosts / cardsPerPage); return ( <>
{posts.map((post, idx) => { const formattedDate = format( new Date(post._createdAt), "MMMM d, yyyy" ); const truncatedDescription = post.smallDescription.length > 130 ? post.smallDescription.substring(0, 130) + "..." : post.smallDescription; return (
{post.title}

{post.title}

{truncatedDescription}

Published on: {formattedDate}

); })}
{totalPages > 1 && ( {currentPage > 1 && ( )} {Array.from({ length: totalPages }).map((_, i) => ( {i + 1} ))} {currentPage < totalPages && ( )} )}
); }; export default BlogCards;