feat(common): pagination, pagination item (#20)

src/components/Pagination/Pagination.tsx

@@ -0,0 +1,13 @@
+import styled from '@emotion/styled';
+
+interface PaginationProps extends React.PropsWithChildren {}
+
+export const Pagination = ({ children }: PaginationProps) => {
+  return (
+    <PaginationNav role="navigation" aria-label="pagination">
+      {children}
+    </PaginationNav>
+  );
+};
+
+const PaginationNav = styled.nav``;

src/components/Pagination/PaginationContent.tsx

@@ -0,0 +1,15 @@
+import styled from '@emotion/styled';
+
+interface PaginationProps extends React.PropsWithChildren {}
+
+export const PaginationContent = ({ children }: PaginationProps) => {
+  return <PaginationList>{children}</PaginationList>;
+};
+const PaginationList = styled.ul`
+  list-style: none;
+  margin: 0px;
+  padding: 0px;
+  display: flex;
+  flex-direction: row;
+  gap: 0.5rem;
+`;

src/components/Pagination/PaginationItem.tsx

@@ -0,0 +1,32 @@
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+
+interface PaginationProps extends React.PropsWithChildren {
+  active?: boolean;
+}
+
+export const PaginationItem = ({ active = false, children }: PaginationProps) => {
+  return <PaginationListItem active={active}>{children}</PaginationListItem>;
+};
+
+const PaginationListItem = styled.li<PaginationProps>`
+  width: 2.5rem;
+  height: 2.5rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  border-radius: 0.25rem;
+  font-weight: 500;
+  ${({ active }) =>
+    active
+      ? css`
+          background-color: var(--primary);
+          color: var(--background);
+        `
+      : css`
+          &:hover {
+            background-color: var(--gray-200);
+          }
+        `}
+`;

src/components/Pagination/index.tsx

@@ -0,0 +1,4 @@
+/* eslint-disable react-refresh/only-export-components */
+export * from './Pagination';
+export * from './PaginationContent';
+export * from './PaginationItem';

src/components/index.ts

@@ -7,6 +7,7 @@ export * from './Dropdown';
 export * from './HoverCard';
 export * from './Input';
 export * from './Label';
+export * from './Pagination';
 export * from './Select';
 export * from './Switch';
 export * from './Textarea';

src/stories/common/Pagination.stories.tsx

@@ -0,0 +1,36 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import * as React from 'react';
+
+import { Pagination, PaginationContent, PaginationItem } from '../../';
+
+const meta = {
+  title: 'common/Pagination',
+  component: Pagination,
+  tags: ['autodocs'],
+  args: {},
+  parameters: {
+    layout: 'centered',
+    componentSubtitle: 'Base Pagination',
+  },
+} satisfies Meta<typeof Pagination>;
+
+export default meta;
+
+type Story = StoryObj<typeof Pagination>;
+
+export const Default: Story = {
+  args: {},
+  decorators: [
+    () => {
+      return (
+        <Pagination>
+          <PaginationContent>
+            <PaginationItem>1</PaginationItem>
+            <PaginationItem active>2</PaginationItem>
+            <PaginationItem>3</PaginationItem>
+          </PaginationContent>
+        </Pagination>
+      );
+    },
+  ],
+};