add additional list pagination helpers and components

src/renderer/components/item-list/item-list-pagination/item-list-pagination.module.css

@@ -0,0 +1,9 @@
+.container {
+    display: flex;
+    flex-direction: column;
+    gap: var(--theme-spacing-md);
+    width: 100%;
+    height: 100%;
+    min-height: 0;
+    padding: var(--theme-spacing-md);
+}

src/renderer/components/item-list/item-list-pagination/item-list-pagination.tsx

@@ -0,0 +1,36 @@
+import { Fragment, ReactNode } from 'react';
+
+import styles from './item-list-pagination.module.css';
+
+import { Pagination } from '/@/shared/components/pagination/pagination';
+
+interface ItemListWithPaginationProps {
+    children: ReactNode;
+    currentPage: number;
+    itemsPerPage: number;
+    onChange: (e: number) => void;
+    pageCount: number;
+    totalItemCount: number;
+}
+
+export const ItemListWithPagination = ({
+    children,
+    currentPage,
+    itemsPerPage,
+    onChange,
+    pageCount,
+    totalItemCount,
+}: ItemListWithPaginationProps) => {
+    return (
+        <div className={styles.container}>
+            <Fragment key={currentPage}>{children}</Fragment>
+            <Pagination
+                itemsPerPage={itemsPerPage}
+                onChange={onChange}
+                total={pageCount}
+                totalItemCount={totalItemCount}
+                value={currentPage}
+            />
+        </div>
+    );
+};

src/renderer/components/item-list/item-list-pagination/use-item-list-pagination.ts

@@ -0,0 +1,23 @@
+import { useSearchParams } from 'react-router-dom';
+
+interface UseItemListPaginationProps {
+    initialPage?: number;
+}
+
+export const useItemListPagination = ({ initialPage }: UseItemListPaginationProps) => {
+    const [searchParams, setSearchParams] = useSearchParams();
+
+    const currentPage = initialPage || Number(searchParams.get('currentPage')) || 0;
+
+    const onChange = (index: number) => {
+        setSearchParams(
+            (params) => {
+                params.set('currentPage', String(index));
+                return params;
+            },
+            { replace: true },
+        );
+    };
+
+    return { currentPage, onChange };
+};