{cart.map((item) => (
-
-
+
{data.response.numFound > 0 ? (
+
-
+
+
+
))}
diff --git a/examples/pixel/src/app/globals.css b/examples/pixel/src/app/globals.css
index 7a676c6..2506403 100644
--- a/examples/pixel/src/app/globals.css
+++ b/examples/pixel/src/app/globals.css
@@ -22,5 +22,15 @@ button:not(.rbui-button), button:not(.rbui-button)[type=button] {
}
.lui-styled {
- --lui-pc-box-shadow: 0 2px 5px 0 #0028400f, 0 9px 9px 0 #0028400d, 0 20px 12px 0 #00284008, 0 36px 15px 0 #00284003, 0 57px 16px 0 #00284000;
+ --lui-pc__box-shadow: 0 2px 5px 0 #0028400f, 0 9px 9px 0 #0028400d, 0 20px 12px 0 #00284008, 0 36px 15px 0 #00284003, 0 57px 16px 0 #00284000;
+ --lui-pagination__item-background--active: #00b2db;
+}
+
+/* Reset the Limitless UI styles to override the button styles from above */
+.lui-styled button.lui-pagination__select {
+ display: flex;
+ gap: 0.5rem;
+ border: var(--lui-pagination__select-border);
+ border-radius: var(--lui-pagination__item-border-radius);
+ padding: 0.5rem;
}
diff --git a/examples/pixel/src/app/products/page.jsx b/examples/pixel/src/app/products/page.jsx
index 4064a88..bda7fa6 100644
--- a/examples/pixel/src/app/products/page.jsx
+++ b/examples/pixel/src/app/products/page.jsx
@@ -4,7 +4,7 @@ import { useEffect, useCallback, useState } from 'react';
import Link from 'next/link';
import { useRouter } from 'next/navigation';
import JsonView from '@uiw/react-json-view';
-import { Pagination } from '@bloomreach/react-banana-ui';
+import { Pagination } from '@bloomreach/limitless-ui-react';
import { ProductCard } from '../../components/ProductCard';
import useAnalytics from '../../hooks/useAnalytics';
import { useDeveloperTools } from '../../hooks/useDeveloperTools';
@@ -127,14 +127,28 @@ export default function Page({ searchParams }) {
+
{item.title}
++ {item.subtitle} +
++ Price: + {' '} + $ + {item.price.toFixed(2)} +
+Qty: {' '} {item.count} - +
++ Item total: + {' '} + $ + {(item.price * item.count).toFixed(2)} +
- updateQueryParams({ rows: newPerPage, page: 0 })}
- onPageChange={(newPage) => updateQueryParams({ page: newPage })}
+ onItemsPerPageChange={(newPerPage) =>
+ updateQueryParams({ rows: newPerPage, page: 0 })
+ }
+ onPageChange={(newPage) =>
+ updateQueryParams({ page: newPage })
+ }
page={parseInt(page, 10)}
- />
+ >
+
+
+
+
+
) : null}