From 62bec3b6714bde02513ee1db717147640b6970eb Mon Sep 17 00:00:00 2001
From: Edouard Wautier <4435185+Duncid@users.noreply.github.com>
Date: Wed, 18 Dec 2024 14:08:27 +0100
Subject: [PATCH] PaginatedCitation update

---
 .../src/components/PaginatedCitationsGrid.tsx | 20 ++++++-------------
 .../PaginatedCitationsGrid.stories.tsx        |  2 +-
 2 files changed, 7 insertions(+), 15 deletions(-)

diff --git a/sparkle/src/components/PaginatedCitationsGrid.tsx b/sparkle/src/components/PaginatedCitationsGrid.tsx
index ea0ebb67aff3..c935dfee9cea 100644
--- a/sparkle/src/components/PaginatedCitationsGrid.tsx
+++ b/sparkle/src/components/PaginatedCitationsGrid.tsx
@@ -5,6 +5,7 @@ import React from "react";
 import {
   Citation,
   CitationDescription,
+  CitationGrid,
   CitationIcons,
   CitationIndex,
   CitationTitle,
@@ -26,37 +27,28 @@ interface PaginatedCitationsGridProps {
 
 export function PaginatedCitationsGrid({
   items,
-  maxItemsPerPage = 9,
+  maxItemsPerPage = 12,
 }: PaginatedCitationsGridProps) {
   const [pagination, setPagination] = useState<PaginationState>({
     pageIndex: 0,
     pageSize: maxItemsPerPage,
   });
-  const cols = 3;
-  const rows = Math.ceil(Math.min(maxItemsPerPage, items.length) / cols);
 
   if (items.length === 0) {
     return null;
   }
 
   const { pageIndex, pageSize } = pagination;
-  // Calculate start index.
   const startIndex = pageIndex * pageSize;
-  // Slice items for current page.
+
   const paginatedItems = items.slice(startIndex, startIndex + pageSize);
 
   return (
     <div className="s-flex s-w-full s-flex-col">
-      <div
-        className={classNames(
-          "s-grid s-w-full s-gap-2 s-overflow-x-hidden s-py-1",
-          `s-grid-cols-${cols}`,
-          `s-grid-rows-${rows}`
-        )}
-      >
+      <CitationGrid>
         {paginatedItems.map((d, idx) => {
           return (
-            <Citation href={d.href}>
+            <Citation href={d.href} variant="primary">
               <CitationIcons>
                 <CitationIndex>{idx}</CitationIndex>
                 {d.icon}
@@ -66,7 +58,7 @@ export function PaginatedCitationsGrid({
             </Citation>
           );
         })}
-      </div>
+      </CitationGrid>
 
       <div
         className={classNames(
diff --git a/sparkle/src/stories/PaginatedCitationsGrid.stories.tsx b/sparkle/src/stories/PaginatedCitationsGrid.stories.tsx
index f06bd0e4c8c2..7138161d6633 100644
--- a/sparkle/src/stories/PaginatedCitationsGrid.stories.tsx
+++ b/sparkle/src/stories/PaginatedCitationsGrid.stories.tsx
@@ -22,7 +22,7 @@ export const PaginatedCitationsGridExample = () => {
   return (
     <>
       <div className="s-flex s-gap-6">
-        <PaginatedCitationsGrid items={makeCitationItems(10)} />
+        <PaginatedCitationsGrid items={makeCitationItems(20)} />
       </div>
     </>
   );