fix storybook

ava-labs · Nov 21, 2024 · b31e3e8 · b31e3e8
1 parent 7a60054
commit b31e3e8
Showing 1 changed file with 31 additions and 13 deletions.
diff --git a/packages/k2-alpine/src/components/PageControl/PageControl.stories.tsx b/packages/k2-alpine/src/components/PageControl/PageControl.stories.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { ScrollView, View } from '../Primitives'
+import { ScrollView, Text, View } from '../Primitives'
 import { Button, useTheme } from '../..'
 import { PageControl } from './PageControl'
 
@@ -10,32 +10,51 @@ export default {
 export const All = (): JSX.Element => {
   const { theme } = useTheme()
 
-  const NUMBER_OF_PAGE = 15
+  const NUMBER_OF_PAGES = [3, 5, 20]
 
+  return (
+    <ScrollView
+      style={{
+        width: '100%',
+        backgroundColor: theme.colors.$surfacePrimary
+      }}
+      contentContainerStyle={{ padding: 16 }}>
+      <View style={{ marginTop: 32, gap: 100 }}>
+        {NUMBER_OF_PAGES.map((numberOfPage, index) => (
+          <View key={index}>
+            <PageControlStory numberOfPage={numberOfPage} />
+          </View>
+        ))}
+      </View>
+    </ScrollView>
+  )
+}
+
+const PageControlStory = ({
+  numberOfPage
+}: {
+  numberOfPage: number
+}): JSX.Element => {
   const [currentPage, setCurrentPage] = useState(0)
 
   const handlePressPrevious = (): void => {
     setCurrentPage(prev => Math.max(prev - 1, 0))
   }
 
   const handlePressNext = (): void => {
-    setCurrentPage(prev => Math.min(prev + 1, NUMBER_OF_PAGE - 1))
+    setCurrentPage(prev => Math.min(prev + 1, numberOfPage - 1))
   }
 
   return (
-    <ScrollView
-      style={{
-        width: '100%',
-        backgroundColor: theme.colors.$surfacePrimary
-      }}
-      contentContainerStyle={{ padding: 16 }}>
+    <>
+      <Text sx={{ alignSelf: 'center' }}>Page Size: {numberOfPage}</Text>
       <PageControl
         style={{
-          marginTop: 100,
+          marginTop: 20,
           marginBottom: 20,
           alignSelf: 'center'
         }}
-        numberOfPage={NUMBER_OF_PAGE}
+        numberOfPage={numberOfPage}
         currentPage={currentPage}
       />
       <View sx={{ flexDirection: 'row', gap: 12, alignSelf: 'center' }}>
@@ -46,7 +65,6 @@ export const All = (): JSX.Element => {
           {'>'}
         </Button>
       </View>
-      <View style={{ height: 160 }} />
-    </ScrollView>
+    </>
   )
 }