import { Canvas, Meta, Story } from '@storybook/addon-docs';

import * as PaginationStories from './pagination.stories';

<Meta of={PaginationStories} />

## 스펙

<div class="not-prose">
  <Canvas of={PaginationStories.Default} />
</div>

```tsx
import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/react/20/solid'

function Pagination() {
  return (
    <nav
      tw="isolate -space-x-px rounded-md shadow-sm inline-flex"
      aria-label="Pagination"
    >
      <a
        href="#"
        tw="relative inline-flex items-center rounded-l-md px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-20 focus:outline-offset-0"
      >
        <span tw="sr-only">Previous</span>
        <ChevronLeftIcon tw="h-5 w-5" aria-hidden="true" />
      </a>
      {/* Current: "z-10 bg-indigo-600 text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600", Default: "text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:outline-offset-0" */}
      <a
        href="#"
        aria-current="page"
        tw="relative z-10 inline-flex items-center bg-indigo-600 px-4 py-2 text-sm font-semibold text-white focus:z-20 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
      >
        1
      </a>
      <a
        href="#"
        tw="relative inline-flex items-center px-4 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-20 focus:outline-offset-0"
      >
        2
      </a>
      <a
        href="#"
        tw="relative hidden items-center px-4 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-20 focus:outline-offset-0 md:inline-flex"
      >
        3
      </a>
      <span tw="relative inline-flex items-center px-4 py-2 text-sm font-semibold text-gray-700 ring-1 ring-inset ring-gray-300 focus:outline-offset-0">
        ...
      </span>
      <a
        href="#"
        tw="relative hidden items-center px-4 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-20 focus:outline-offset-0 md:inline-flex"
      >
        8
      </a>
      <a
        href="#"
        tw="relative inline-flex items-center px-4 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-20 focus:outline-offset-0"
      >
        9
      </a>
      <a
        href="#"
        tw="relative inline-flex items-center px-4 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-20 focus:outline-offset-0"
      >
        10
      </a>
      <a
        href="#"
        tw="relative inline-flex items-center rounded-r-md px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-20 focus:outline-offset-0"
      >
        <span tw="sr-only">Next</span>
        <ChevronRightIcon tw="h-5 w-5" aria-hidden="true" />
      </a>
    </nav>
  )
}

export default Pagination
```