From 9ff104baa2e518f33c442168cba2ab514ba45a82 Mon Sep 17 00:00:00 2001
From: Kushal Kumar Nerella
 <106776313+KushalNerella07@users.noreply.github.com>
Date: Wed, 11 Oct 2023 07:06:19 -1000
Subject: [PATCH] Added Pagination Component to Storybook (#104)

closes https://github.com/vczb/sagu-ui/issues/100
---
 src/packages/Pagination/stories.tsx | 47 +++++++++++++++++++++++++++++
 src/packages/index.ts               |  3 +-
 2 files changed, 49 insertions(+), 1 deletion(-)
 create mode 100644 src/packages/Pagination/stories.tsx

diff --git a/src/packages/Pagination/stories.tsx b/src/packages/Pagination/stories.tsx
new file mode 100644
index 0000000..42a8c95
--- /dev/null
+++ b/src/packages/Pagination/stories.tsx
@@ -0,0 +1,47 @@
+import React, { useState, useEffect } from 'react'
+import Pagination, { PaginationProps } from '.'
+
+export default {
+  title: 'Pagination',
+  component: Pagination,
+  args: {
+    totalCount: 100,
+    currentPage: 1,
+    pageSize: 10,
+    siblingCount: 1,
+    colors: {
+      page: 'gray',
+      hover: 'blue'
+    }
+  }
+}
+
+const Template = (args: PaginationProps) => {
+  const [currentPage, setCurrentPage] = useState(args.currentPage)
+
+  useEffect(() => {
+    setCurrentPage(args.currentPage)
+  }, [args.currentPage])
+
+  return (
+    <Pagination
+      {...args}
+      currentPage={currentPage}
+      onPageChange={(page: number) => {
+        setCurrentPage(page)
+      }}
+    />
+  )
+}
+
+export const Default = Template.bind({})
+Default.args = {
+  totalCount: 100,
+  currentPage: 1,
+  pageSize: 10,
+  siblingCount: 1,
+  colors: {
+    page: 'gray',
+    hover: 'blue'
+  }
+}
diff --git a/src/packages/index.ts b/src/packages/index.ts
index 25f76c4..b8013bf 100644
--- a/src/packages/index.ts
+++ b/src/packages/index.ts
@@ -27,4 +27,5 @@ export { default as Breadcrumb } from './Breadcrumb'
 export { default as Skeleton } from './Skeleton'
 export { default as Switch } from './Switch'
 export { default as Table } from './Table'
-// export { default as Pagination } from './Pagination' TODO: review pagination styles and logic
+export { default as Pagination } from './Pagination'
+