added pagination to a given authors page

frontend/components/PaginationControl.tsx

@@ -0,0 +1,89 @@
+import * as hi from "jsr:@preact-icons/hi2";
+
+export function PaginationControl({
+  paginatedData,
+  currentUrl,
+  authorId,
+}: {
+  paginatedData: PaginatedPosts;
+  currentUrl: URL;
+  authorId: number;
+}) {
+  const buildUrl = (page: number, limit?: number) => {
+    const params = new URLSearchParams(currentUrl.searchParams);
+    params.set("page", page.toString());
+    if (limit) params.set("limit", limit.toString());
+    return `${currentUrl.pathname}?${params.toString()}`;
+  };
+
+  if (paginatedData.totalPages <= 1) return null;
+
+  return (
+    <div class="mt-8 space-y-4">
+      {/* Pagination info and controls */}
+      <div class="flex flex-col sm:flex-row justify-center items-center gap-4">
+        <div class="flex items-center gap-2">
+          {paginatedData.hasPrevPage && (
+            <a
+              href={buildUrl(paginatedData.currentPage - 1)}
+              class="px-4 py-2 bg-[#45475a] text-[#cdd6f4] shadow-sm rounded hover:bg-[#6A6B7A] transition-colors"
+            >
+              <div class="flex items-center gap-2">
+                <hi.HiChevronDoubleLeft />
+                Previous
+              </div>
+            </a>
+          )}
+
+          {/* Page numbers */}
+          <div class="flex gap-1">
+            {Array.from(
+              { length: Math.min(paginatedData.totalPages, 7) },
+              (_, i) => {
+                let pageNum;
+                if (paginatedData.totalPages <= 7) {
+                  pageNum = i + 1;
+                } else {
+                  const start = Math.max(1, paginatedData.currentPage - 3);
+                  const end = Math.min(paginatedData.totalPages, start + 6);
+                  pageNum = start + i;
+                  if (pageNum > end) return null;
+                }
+
+                const isCurrentPage = pageNum === paginatedData.currentPage;
+
+                return (
+                  <a
+                    key={pageNum}
+                    href={buildUrl(pageNum)}
+                    class={`px-3 py-1 rounded text-sm shadow-sm ${
+                      isCurrentPage
+                        ? "bg-[#6A6B7A] text-[#cdd6f4]"
+                        : "bg-[#45475a] text-[#cdd6f4] hover:bg-[#6A6B7A]"
+                    }`}
+                  >
+                    {pageNum}
+                  </a>
+                );
+              },
+            )}
+          </div>
+
+          {paginatedData.hasNextPage && (
+            <a
+              href={buildUrl(paginatedData.currentPage + 1)}
+              class="px-4 py-2 bg-[#45475a] text-[#cdd6f4] shadow-sm rounded hover:bg-[#6A6B7A] transition-colors"
+            >
+              <div class="flex items-center gap-2">
+                Next
+                <hi.HiChevronDoubleRight />
+              </div>
+            </a>
+          )}
+        </div>
+
+        {/* Quick jump to page */}
+      </div>
+    </div>
+  );
+}

frontend/components/PostCard.tsx

@@ -4,7 +4,7 @@ import { Post } from "../types/index.ts";
 
 export const PostCard = function PostCard({ post }: { post: Post }) {
   return (
-    <div class="p-6 bg-[#45475a] rounded-lg shadow-md transition-all duration-300 ease-in-out hover:shadow-xl hover:scale-105">
+    <div class="p-6 bg-[#45475a] rounded-lg shadow-xl transition-all duration-300 ease-in-out hover:shadow-xl hover:scale-105">
       <a href={`${Deno.env.get("BASE_URI_WEB")}/posts/${post.post_id}`}>
         <h2 class="text-white text-lg font-bold mb-2">{post.title}</h2>
         <p class="text-white">
@@ -17,7 +17,7 @@ export const PostCard = function PostCard({ post }: { post: Post }) {
           </a>{" "}
           at {convertUtc(post.created_at)}
         </p>
-        <p class="text-gray-400">{truncateString(post.body, 15)}</p>
+        <p class="text-gray-400">{truncateString(post.body, 30)}</p>
       </a>
     </div>
   );