feat(): Add pagination component and story.

CQCL · Jan 2, 2024 · 3479e82 · 3479e82
1 parent 45a934d
commit 3479e82
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 0 deletions.
diff --git a/src/index.ts b/src/index.ts
@@ -19,6 +19,7 @@ export * from "./atoms/input";
 export * from "./atoms/label";
 export * from "./atoms/menubar";
 export * from "./atoms/navigation-menu";
+export * from "./atoms/pagination";
 export * from "./atoms/popover";
 export * from "./atoms/progress";
 export * from "./atoms/radio-group";

diff --git a/stories/atoms/pagination.stories.tsx b/stories/atoms/pagination.stories.tsx
@@ -0,0 +1,54 @@
+import {
+    Pagination,
+    PaginationContent,
+    PaginationEllipsis,
+    PaginationItem,
+    PaginationLink,
+    PaginationNext,
+    PaginationPrevious,
+} from "src/atoms/pagination";
+
+  export function PaginationDemo() {
+    return (
+      <Pagination>
+        <PaginationContent>
+          <PaginationItem>
+            <PaginationPrevious href="#" />
+          </PaginationItem>
+          <PaginationItem>
+            <PaginationLink href="#">1</PaginationLink>
+          </PaginationItem>
+          <PaginationItem>
+            <PaginationLink href="#" isActive>
+              2
+            </PaginationLink>
+          </PaginationItem>
+          <PaginationItem>
+            <PaginationLink href="#">3</PaginationLink>
+          </PaginationItem>
+          <PaginationItem>
+            <PaginationEllipsis />
+          </PaginationItem>
+          <PaginationItem>
+            <PaginationNext href="#" />
+          </PaginationItem>
+        </PaginationContent>
+      </Pagination>
+    )
+  }
+
+
+  import type { Meta, StoryObj } from "@storybook/react";
+
+
+const meta: Meta<typeof PaginationDemo> = {
+  component: PaginationDemo,
+};
+
+export default meta;
+
+export const Default: StoryObj<typeof PaginationDemo> = {
+  args: {},
+};
+
+