72 lines
1.6 KiB
TypeScript
72 lines
1.6 KiB
TypeScript
import type { Meta, StoryObj } from '@storybook/react'
|
|
import { Terminal, AlertCircle } from 'lucide-react'
|
|
|
|
import { Alert, AlertTitle, AlertDescription } from '@/components/ui/alert'
|
|
|
|
const meta = {
|
|
title: 'Feedback/Alert',
|
|
component: Alert,
|
|
tags: ['autodocs'],
|
|
parameters: { layout: 'centered' },
|
|
argTypes: {
|
|
variant: {
|
|
control: 'select',
|
|
options: ['default', 'destructive'],
|
|
},
|
|
},
|
|
decorators: [
|
|
(Story) => (
|
|
<div className="w-125">
|
|
<Story />
|
|
</div>
|
|
),
|
|
],
|
|
} satisfies Meta<typeof Alert>
|
|
|
|
export default meta
|
|
type Story = StoryObj<typeof meta>
|
|
|
|
export const Default: Story = {
|
|
render: () => (
|
|
<Alert>
|
|
<Terminal className="size-4" />
|
|
<AlertTitle>Heads up!</AlertTitle>
|
|
<AlertDescription>
|
|
You can add components to your app using the CLI.
|
|
</AlertDescription>
|
|
</Alert>
|
|
),
|
|
}
|
|
|
|
export const Destructive: Story = {
|
|
render: () => (
|
|
<Alert variant="destructive">
|
|
<AlertCircle className="size-4" />
|
|
<AlertTitle>Error</AlertTitle>
|
|
<AlertDescription>
|
|
Your session has expired. Please log in again.
|
|
</AlertDescription>
|
|
</Alert>
|
|
),
|
|
}
|
|
|
|
export const WithoutIcon: Story = {
|
|
render: () => (
|
|
<Alert>
|
|
<AlertTitle>Note</AlertTitle>
|
|
<AlertDescription>
|
|
This alert has no icon, just a title and description.
|
|
</AlertDescription>
|
|
</Alert>
|
|
),
|
|
}
|
|
|
|
export const TitleOnly: Story = {
|
|
render: () => (
|
|
<Alert>
|
|
<Terminal className="size-4" />
|
|
<AlertTitle>A simple alert with only a title.</AlertTitle>
|
|
</Alert>
|
|
),
|
|
}
|