You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
69 lines
1.3 KiB
69 lines
1.3 KiB
import type { Post } from 'contentlayer/generated';
|
|
import type { Meta, StoryObj } from '@storybook/react';
|
|
|
|
import { PostPaginator } from '@/components/post-paginator';
|
|
import { Padding } from './decorators';
|
|
|
|
const posts = Array.from({ length: 100 }, (_, index) => ({
|
|
title: `Post ${index + 1}`,
|
|
excerpt: `This is post ${index + 1}`,
|
|
date: '2022-01-01',
|
|
tags: ['example', 'post', 'tags'],
|
|
url: `/posts/post-${index + 1}`,
|
|
slug: `posts/post-${index + 1}`,
|
|
})) as Post[];
|
|
|
|
const meta: Meta<typeof PostPaginator> = {
|
|
title: 'Post Paginator',
|
|
component: PostPaginator,
|
|
decorators: [Padding],
|
|
args: {
|
|
postsPerPage: 5,
|
|
},
|
|
};
|
|
|
|
export default meta;
|
|
type Story = StoryObj<typeof PostPaginator>;
|
|
|
|
export const TenPages: Story = {
|
|
args: {
|
|
posts: posts.slice(0, 50),
|
|
},
|
|
};
|
|
|
|
export const ThreePages: Story = {
|
|
args: {
|
|
posts: posts.slice(0, 15),
|
|
},
|
|
};
|
|
|
|
export const TwoPages: Story = {
|
|
args: {
|
|
posts: posts.slice(0, 10),
|
|
},
|
|
};
|
|
|
|
export const OnePage: Story = {
|
|
args: {
|
|
posts: posts.slice(0, 5),
|
|
},
|
|
};
|
|
|
|
export const TwentyPages: Story = {
|
|
args: {
|
|
posts,
|
|
},
|
|
};
|
|
|
|
export const OnePost: Story = {
|
|
args: {
|
|
posts: posts.slice(0, 1),
|
|
},
|
|
};
|
|
|
|
export const TenPerPage: Story = {
|
|
args: {
|
|
posts,
|
|
postsPerPage: 10,
|
|
},
|
|
};
|
|
|