55 lines
1.1 KiB
TypeScript
55 lines
1.1 KiB
TypeScript
import type { Meta, StoryObj } from '@storybook/react'
|
|
|
|
import { Spinner } from '@/components/ui/spinner'
|
|
|
|
const meta = {
|
|
title: 'Feedback/Spinner',
|
|
component: Spinner,
|
|
tags: ['autodocs'],
|
|
parameters: { layout: 'centered' },
|
|
} satisfies Meta<typeof Spinner>
|
|
|
|
export default meta
|
|
type Story = StoryObj<typeof meta>
|
|
|
|
export const Default: Story = {}
|
|
|
|
export const Small: Story = {
|
|
args: {
|
|
className: 'size-3 animate-spin',
|
|
},
|
|
}
|
|
|
|
export const Large: Story = {
|
|
args: {
|
|
className: 'size-8 animate-spin',
|
|
},
|
|
}
|
|
|
|
export const ExtraLarge: Story = {
|
|
args: {
|
|
className: 'size-12 animate-spin',
|
|
},
|
|
}
|
|
|
|
export const WithText: Story = {
|
|
render: () => (
|
|
<div className="flex items-center gap-2">
|
|
<Spinner />
|
|
<span className="text-sm text-muted-foreground">Loading...</span>
|
|
</div>
|
|
),
|
|
}
|
|
|
|
export const Sizes: Story = {
|
|
render: () => (
|
|
<div className="flex items-center gap-4">
|
|
<Spinner className="size-3 animate-spin" />
|
|
<Spinner />
|
|
<Spinner className="size-6 animate-spin" />
|
|
<Spinner className="size-8 animate-spin" />
|
|
<Spinner className="size-12 animate-spin" />
|
|
</div>
|
|
),
|
|
}
|