feat: added pagination (#14)

README.md

@@ -143,7 +143,7 @@ Use tools like the official <a href="https://daisyui.com/theme-generator/">daisy
 - [X] <a href="https://daisyui.github.io/react-daisyui/?path=/story/navigation-link">Link</a>
 - [X] <a href="https://daisyui.github.io/react-daisyui/?path=/story/navigation-menu">Menu</a>
 - [X] <a href="https://daisyui.github.io/react-daisyui/?path=/story/navigation-navbar">Navbar</a>
-- [ ] <a href="https://daisyui.github.io/react-daisyui/?path=/story/navigation-pagination">Pagination</a>
+- [X] <a href="https://daisyui.github.io/react-daisyui/?path=/story/navigation-pagination">Pagination</a>
 - [X] <a href="https://daisyui.github.io/react-daisyui/?path=/story/navigation-steps">Steps</a>
 - [X] <a href="https://daisyui.github.io/react-daisyui/?path=/story/navigation-tabs">Tabs</a>
 </details>

src/Button/Button.tsx

@@ -22,6 +22,7 @@ export type ButtonProps =
     responsive?: boolean
     animation?: boolean
     loading?: boolean
+    active?: boolean
 }
 
 const Button = forwardRef<HTMLButtonElement, ButtonProps>(({
@@ -35,6 +36,7 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(({
   responsive,
   animation = true,
   loading,
+  active,
   disabled,
   dataTheme,
   className,
@@ -52,6 +54,7 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(({
       'btn-block': fullWidth,
       'btn-xs md:btn-sm lg:btn-md xl:btn-lg': responsive,
       'no-animation': !animation,
+      'btn-active': active,
       'btn-disabled': disabled,
       'loading': loading,
     })

src/Pagination/Pagination.stories.tsx

@@ -0,0 +1,23 @@
+import React from 'react'
+import { Story, Meta } from '@storybook/react'
+
+import Pagination, { PaginationProps } from '.'
+import Button from '../Button'
+
+export default {
+  title: 'Navigation/Pagination',
+  component: Pagination,
+} as Meta
+
+export const Default: Story<PaginationProps> = (args) => {
+  return (
+    <Pagination {...args}>
+        <Button>1</Button>
+        <Button active>2</Button>
+        <Button>3</Button>
+        <Button>4</Button>
+    </Pagination>
+  )
+}
+
+Default.args = {}

src/Pagination/Pagination.tsx

@@ -0,0 +1,5 @@
+import ButtonGroup, { ButtonGroupProps } from "../ButtonGroup"
+
+export type PaginationProps = ButtonGroupProps
+const Pagination = ButtonGroup
+export default Pagination

src/Pagination/index.tsx

@@ -0,0 +1,3 @@
+import Pagination, { PaginationProps as TPaginationProps } from './Pagination'
+export type PaginationProps = TPaginationProps
+export default Pagination

src/index.ts

@@ -27,6 +27,7 @@ import Mask from './Mask'
 import Menu from './Menu'
 import Modal from './Modal'
 import Navbar from './Navbar'
+import Pagination from './Pagination'
 import Progress from './Progress'
 import RadialProgress from './RadialProgress'
 import Radio from './Radio'
@@ -58,6 +59,7 @@ export {
   Collapse,
   Countdown,
   Divider,
+  Drawer,
   Dropdown,
   Footer,
   Form,
@@ -71,6 +73,7 @@ export {
   Menu,
   Modal,
   Navbar,
+  Pagination,
   Progress,
   RadialProgress,
   Radio,