OwlCyberSecurity - MANAGER

Edit File: AllBlog.tsx

import Link from "next/link";
import React from "react";
import PaginationControls from "../components/PaginationControls";
import Image from "next/image";

type PageProps = {
  searchParams: { [key: string]: string | string[] | undefined };
};

async function AllBlog({ searchParams }: PageProps) {
  const page = searchParams["page"] ?? "1";
  const per_page = "8";

const posts = await fetchPosts(per_page, page);

return (
    <div className="all-blog-container">
      <h2>
        مجله <span className="text-[var(--base-yellow)]">چارسوق</span>
      </h2>
      <div className="all-blog-content">
        {posts
          ? posts.articles.map((item: any) => (
              <Link
                key={item.slug}
                href={`/articles/${item.slug}`}
                className="flex flex-col gap-4 p-4 rounded-md items-center h-full transition-all duration-100 hover:shadow-md border bg-gray-50 hover:bg-gray-200"
              >
                <Image
                  className="w-full"
                  width={285}
                  height={170}
                  src={item.image.path}
                  alt={item.image.caption}
                  loading="eager"
                />
                <div className="flex flex-col gap-2 justify-between h-full text-sm">
                  <div className="flex flex-col gap-2 text-[var(--primary-font)] justify-between h-full">
                    <h5 className="line-clamp-2 font-IRANSansBold leading-7">
                      {item.title}
                    </h5>
                    <p className="line-clamp-4 leading-7">{item.excerpt}</p>
                  </div>
                  <span className="text-[var(--text-gray)]">
                    {item.created_at}
                  </span>
                </div>
              </Link>
            ))
          : null}
      </div>
      <div>
        <PaginationControls per_page={per_page} page={page} posts={posts} />
      </div>
    </div>
  );
}

export default AllBlog;