79 lines
1.9 KiB
TypeScript
79 lines
1.9 KiB
TypeScript
import type { Meta, StoryObj } from '@storybook/react';
|
|
import { ArrowRightSquare } from 'lucide-react';
|
|
|
|
import {
|
|
Breadcrumb,
|
|
BreadcrumbItem,
|
|
BreadcrumbLink,
|
|
BreadcrumbList,
|
|
BreadcrumbPage,
|
|
BreadcrumbSeparator,
|
|
} from '@konobangu/design-system/components/ui/breadcrumb';
|
|
|
|
/**
|
|
* Displays the path to the current resource using a hierarchy of links.
|
|
*/
|
|
const meta = {
|
|
title: 'ui/Breadcrumb',
|
|
component: Breadcrumb,
|
|
tags: ['autodocs'],
|
|
argTypes: {},
|
|
args: {},
|
|
render: (args) => (
|
|
<Breadcrumb {...args}>
|
|
<BreadcrumbList>
|
|
<BreadcrumbItem>
|
|
<BreadcrumbLink>Home</BreadcrumbLink>
|
|
</BreadcrumbItem>
|
|
<BreadcrumbSeparator />
|
|
<BreadcrumbItem>
|
|
<BreadcrumbLink>Components</BreadcrumbLink>
|
|
</BreadcrumbItem>
|
|
<BreadcrumbSeparator />
|
|
<BreadcrumbItem>
|
|
<BreadcrumbPage>Breadcrumb</BreadcrumbPage>
|
|
</BreadcrumbItem>
|
|
</BreadcrumbList>
|
|
</Breadcrumb>
|
|
),
|
|
parameters: {
|
|
layout: 'centered',
|
|
},
|
|
} satisfies Meta<typeof Breadcrumb>;
|
|
|
|
export default meta;
|
|
|
|
type Story = StoryObj<typeof meta>;
|
|
|
|
/**
|
|
* Displays the path of links to the current resource.
|
|
*/
|
|
export const Default: Story = {};
|
|
|
|
/**
|
|
* Displays the path with a custom icon for the separator.
|
|
*/
|
|
export const WithCustomSeparator: Story = {
|
|
render: (args) => (
|
|
<Breadcrumb {...args}>
|
|
<BreadcrumbList>
|
|
<BreadcrumbItem>
|
|
<BreadcrumbLink>Home</BreadcrumbLink>
|
|
</BreadcrumbItem>
|
|
<BreadcrumbSeparator>
|
|
<ArrowRightSquare />
|
|
</BreadcrumbSeparator>
|
|
<BreadcrumbItem>
|
|
<BreadcrumbLink>Components</BreadcrumbLink>
|
|
</BreadcrumbItem>
|
|
<BreadcrumbSeparator>
|
|
<ArrowRightSquare />
|
|
</BreadcrumbSeparator>
|
|
<BreadcrumbItem>
|
|
<BreadcrumbPage>Breadcrumb</BreadcrumbPage>
|
|
</BreadcrumbItem>
|
|
</BreadcrumbList>
|
|
</Breadcrumb>
|
|
),
|
|
};
|