Add blog pagination component

A new component, BlogPagination, has been added to the blog section of the website. This component includes buttons for navigating to the next and previous pages of blog posts. The BlogPagination component has been integrated into the main blog page, resulting in a more user-friendly browsing experience.

apps/web/app/(marketing)/blog/_components/blog-pagination.tsx

@@ -0,0 +1,58 @@
+'use client';
+
+import { usePathname, useRouter } from 'next/navigation';
+
+import { ArrowLeft, ArrowRight } from 'lucide-react';
+
+import { Button } from '@kit/ui/button';
+import { If } from '@kit/ui/if';
+import { Trans } from '@kit/ui/trans';
+
+export function BlogPagination(props: {
+  currentPage: number;
+  canGoToNextPage: boolean;
+  canGoToPreviousPage: boolean;
+}) {
+  const navigate = useGoToPage();
+
+  return (
+    <div className={'flex items-center space-x-2'}>
+      <If condition={props.canGoToPreviousPage}>
+        <Button
+          variant={'outline'}
+          onClick={() => {
+            navigate(props.currentPage - 1);
+          }}
+        >
+          <ArrowLeft className={'mr-2 h-4'} />
+          <Trans i18nKey={'marketing:blogPaginationPrevious'} />
+        </Button>
+      </If>
+
+      <If condition={props.canGoToNextPage}>
+        <Button
+          variant={'outline'}
+          onClick={() => {
+            navigate(props.currentPage + 1);
+          }}
+        >
+          <Trans i18nKey={'marketing:blogPaginationNext'} />
+          <ArrowRight className={'ml-2 h-4'} />
+        </Button>
+      </If>
+    </div>
+  );
+}
+
+function useGoToPage() {
+  const router = useRouter();
+  const path = usePathname();
+
+  return (page: number) => {
+    const searchParams = new URLSearchParams({
+      page: page.toString(),
+    });
+
+    router.push(path + '?' + searchParams.toString());
+  };
+}

apps/web/app/(marketing)/blog/page.tsx

@@ -6,6 +6,7 @@ import { SitePageHeader } from '~/(marketing)/_components/site-page-header';
 import { createI18nServerInstance } from '~/lib/i18n/i18n.server';
 import { withI18n } from '~/lib/i18n/with-i18n';
 
+import { BlogPagination } from './_components/blog-pagination';
 import { PostPreview } from './_components/post-preview';
 
 export const generateMetadata = async () => {
@@ -25,7 +26,7 @@ async function BlogPage({ searchParams }: { searchParams: { page: string } }) {
   const limit = 10;
   const offset = page * limit;
 
-  const { items: posts } = await cms.getContentItems({
+  const { items: posts, total } = await cms.getContentItems({
     collection: 'posts',
     limit,
     offset,
@@ -38,7 +39,7 @@ async function BlogPage({ searchParams }: { searchParams: { page: string } }) {
         subtitle={t('marketing:blogSubtitle')}
       />
 
-      <div className={'container py-12'}>
+      <div className={'container flex flex-col space-y-6 py-12'}>
         <If
           condition={posts.length > 0}
           fallback={<Trans i18nKey="marketing:noPosts" />}
@@ -48,6 +49,14 @@ async function BlogPage({ searchParams }: { searchParams: { page: string } }) {
               return <PostPreview key={idx} post={post} />;
             })}
           </PostsGridList>
+
+          <div>
+            <BlogPagination
+              currentPage={page}
+              canGoToNextPage={offset + limit < total}
+              canGoToPreviousPage={page > 0}
+            />
+          </div>
         </If>
       </div>
     </>