mirror of
https://github.com/langgenius/dify.git
synced 2025-12-04 14:56:42 +00:00
50 lines
1.3 KiB
TypeScript
50 lines
1.3 KiB
TypeScript
import type { Meta, StoryObj } from '@storybook/nextjs'
|
|
import ListEmpty from '.'
|
|
|
|
const meta = {
|
|
title: 'Base/Data Display/ListEmpty',
|
|
component: ListEmpty,
|
|
parameters: {
|
|
layout: 'centered',
|
|
docs: {
|
|
description: {
|
|
component: 'Large empty state card used in panels and drawers to hint at the next action for the user.',
|
|
},
|
|
},
|
|
},
|
|
args: {
|
|
title: 'No items yet',
|
|
description: (
|
|
<p className="text-xs leading-5 text-text-tertiary">
|
|
Add your first entry to see it appear here. Empty states help users discover what happens next.
|
|
</p>
|
|
),
|
|
},
|
|
argTypes: {
|
|
description: { control: false },
|
|
icon: { control: false },
|
|
},
|
|
tags: ['autodocs'],
|
|
} satisfies Meta<typeof ListEmpty>
|
|
|
|
export default meta
|
|
type Story = StoryObj<typeof meta>
|
|
|
|
export const Default: Story = {}
|
|
|
|
export const WithCustomIcon: Story = {
|
|
args: {
|
|
title: 'Connect a data source',
|
|
description: (
|
|
<p className="text-xs leading-5 text-text-secondary">
|
|
Choose a database, knowledge base, or upload documents to get started with retrieval.
|
|
</p>
|
|
),
|
|
icon: (
|
|
<div className="flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br from-primary-100 via-primary-200 to-primary-300 text-primary-700 shadow-sm">
|
|
{'\u{26A1}\u{FE0F}'}
|
|
</div>
|
|
),
|
|
},
|
|
}
|