Shuffle @oxide/pagination files

libs/pagination/Pagination.tsx

@@ -5,6 +5,7 @@
  *
  * Copyright Oxide Computer Company
  */
+import { useState } from 'react'
 import tunnel from 'tunnel-rat'
 
 import {
@@ -29,3 +30,28 @@ export function Pagination({ inline = false, ...props }: PaginationProps) {
 }
 
 Pagination.Target = Tunnel.Out
+
+type PageToken = string | undefined
+
+export function usePagination() {
+  const [prevPages, setPrevPages] = useState<PageToken[]>([])
+  const [currentPage, setCurrentPage] = useState<PageToken>()
+
+  const goToPrevPage = () => {
+    const prevPage = prevPages.pop()
+    setCurrentPage(prevPage)
+    setPrevPages(prevPages)
+  }
+
+  const goToNextPage = (nextPageToken: string) => {
+    setPrevPages([...prevPages, currentPage])
+    setCurrentPage(nextPageToken)
+  }
+
+  return {
+    currentPage,
+    goToNextPage,
+    goToPrevPage,
+    hasPrev: prevPages.length > 0,
+  }
+}

libs/pagination/__tests__/use-pagination.spec.ts

@@ -8,7 +8,7 @@
 import { act, renderHook } from '@testing-library/react'
 import { describe, expect, it } from 'vitest'
 
-import { usePagination } from '../use-pagination'
+import { usePagination } from '../index.tsx'
 
 describe('usePagination', () => {
   it('starts with empty state', () => {

libs/pagination/use-pagination.tsx → libs/pagination/index.tsx

@@ -6,6 +6,30 @@
  * Copyright Oxide Computer Company
  */
 import { useState } from 'react'
+import tunnel from 'tunnel-rat'
+
+import {
+  Pagination as UIPagination,
+  type PaginationProps as UIPaginationProps,
+} from '@oxide/ui'
+
+const Tunnel = tunnel('pagination')
+
+interface PaginationProps extends UIPaginationProps {
+  /** If true pagination will be rendered wherever `Pagination.Target` is included */
+  inline?: boolean
+}
+export function Pagination({ inline = false, ...props }: PaginationProps) {
+  if (inline) return <UIPagination {...props} />
+
+  return (
+    <Tunnel.In>
+      <UIPagination className="gutter h-14 py-5" {...props} />
+    </Tunnel.In>
+  )
+}
+
+Pagination.Target = Tunnel.Out
 
 type PageToken = string | undefined
 

tsconfig.json

@@ -19,7 +19,7 @@
       "@oxide/ui": ["libs/ui/index.ts"],
       "@oxide/util": ["libs/util/index.ts"],
       "@oxide/table": ["libs/table/index.ts"],
-      "@oxide/pagination": ["libs/pagination/index.ts"]
+      "@oxide/pagination": ["libs/pagination/index.tsx"]
     },
     "resolveJsonModule": true,
     "rootDir": ".",