Added static design for Pagination component

refs https://github.com/TryGhost/Product/issues/3822

apps/admin-x-settings/src/admin-x-ds/global/Pagination.stories.tsx

@@ -0,0 +1,33 @@
+import type {Meta, StoryObj} from '@storybook/react';
+
+import Pagination from './Pagination';
+
+const meta = {
+    title: 'Global / Pagination story',
+    component: Pagination,
+    tags: ['autodocs']
+} satisfies Meta<typeof Pagination>;
+
+export default meta;
+type Story = StoryObj<typeof Pagination>;
+
+export const Default: Story = {
+    args: {
+        itemsPerPage: 5,
+        itemsTotal: 15
+    }
+};
+
+export const LessThanMaximum: Story = {
+    args: {
+        itemsPerPage: 9,
+        itemsTotal: 5
+    }
+};
+
+export const MoreThanMaximum: Story = {
+    args: {
+        itemsPerPage: 5,
+        itemsTotal: 15
+    }
+};

apps/admin-x-settings/src/admin-x-ds/global/Pagination.tsx

@@ -0,0 +1,29 @@
+import Icon from './Icon';
+import React from 'react';
+
+interface PaginationProps {
+    itemsPerPage: number;
+    itemsTotal: number;
+}
+
+const Pagination: React.FC<PaginationProps> = ({itemsPerPage, itemsTotal}) => {
+    /* If there is less than X items total, where X is the number of items per page that we want to show */
+    if (itemsPerPage < itemsTotal) {
+        return (
+            <div className={`flex items-center gap-2 text-xs text-grey-700`}>Showing 1-{itemsPerPage} of {itemsTotal} 
+                <button type='button'><Icon className="h-[10px] w-[10px] opacity-50 [&>path]:stroke-[3px]" colorClass="text-green" name='chevron-left' />
+                </button>
+                <button className="cursor-pointer" type="button"><Icon className="h-[10px] w-[10px] [&>path]:stroke-[3px]" colorClass="text-green" name='chevron-right' /></button>
+            </div>
+        );
+            
+    /* If there is more than X items total, where X is the number of items per page that we want to show */
+    } else {
+        return (
+            <div className={`mt-1 flex items-center gap-2 text-xs text-grey-700`}>Showing {itemsTotal} in total
+            </div>
+        );
+    }
+};
+
+export default Pagination;