90 lines
1.7 KiB
TypeScript
90 lines
1.7 KiB
TypeScript
import type { Meta, StoryObj } from '@storybook/react'
|
|
import { useState } from 'react'
|
|
import { Pagination } from './Pagination'
|
|
|
|
const meta = {
|
|
title: 'Components/Pagination',
|
|
component: Pagination,
|
|
argTypes: {
|
|
totalPages: { control: 'number' },
|
|
currentPage: { control: 'number' },
|
|
pageCount: { control: 'number' },
|
|
},
|
|
} satisfies Meta<typeof Pagination>
|
|
|
|
export default meta
|
|
type Story = StoryObj<typeof meta>
|
|
|
|
export const Default: Story = {
|
|
args: {
|
|
totalPages: 100,
|
|
currentPage: 0,
|
|
pageCount: 10,
|
|
onPageChange: () => {},
|
|
},
|
|
}
|
|
|
|
export const MiddlePage: Story = {
|
|
args: {
|
|
totalPages: 100,
|
|
currentPage: 45,
|
|
pageCount: 10,
|
|
onPageChange: () => {},
|
|
},
|
|
}
|
|
|
|
export const LastPage: Story = {
|
|
args: {
|
|
totalPages: 100,
|
|
currentPage: 99,
|
|
pageCount: 10,
|
|
onPageChange: () => {},
|
|
},
|
|
}
|
|
|
|
export const FewPages: Story = {
|
|
args: {
|
|
totalPages: 5,
|
|
currentPage: 0,
|
|
pageCount: 10,
|
|
onPageChange: () => {},
|
|
},
|
|
}
|
|
|
|
export const SinglePage: Story = {
|
|
args: {
|
|
totalPages: 1,
|
|
currentPage: 0,
|
|
pageCount: 10,
|
|
onPageChange: () => {},
|
|
},
|
|
}
|
|
|
|
export const Interactive: Story = {
|
|
render: () => {
|
|
const [currentPage, setCurrentPage] = useState(0)
|
|
return (
|
|
<div className="flex flex-col gap-4 items-center">
|
|
<Pagination
|
|
totalPages={50}
|
|
currentPage={currentPage}
|
|
pageCount={10}
|
|
onPageChange={setCurrentPage}
|
|
/>
|
|
<p className="text-sm text-dabeeo-gray-44">
|
|
현재 페이지: {currentPage + 1} / 50
|
|
</p>
|
|
</div>
|
|
)
|
|
},
|
|
}
|
|
|
|
export const CustomPageCount: Story = {
|
|
args: {
|
|
totalPages: 100,
|
|
currentPage: 0,
|
|
pageCount: 5,
|
|
onPageChange: () => {},
|
|
},
|
|
}
|