64 lines
1.4 KiB
TypeScript
64 lines
1.4 KiB
TypeScript
import type { Meta, StoryObj } from '@storybook/react'
|
|
|
|
import { Skeleton } from '@/components/ui/skeleton'
|
|
|
|
const meta = {
|
|
title: 'Feedback/Skeleton',
|
|
component: Skeleton,
|
|
tags: ['autodocs'],
|
|
parameters: { layout: 'centered' },
|
|
} satisfies Meta<typeof Skeleton>
|
|
|
|
export default meta
|
|
type Story = StoryObj<typeof meta>
|
|
|
|
export const Default: Story = {
|
|
args: {
|
|
className: 'h-4 w-62.5',
|
|
},
|
|
}
|
|
|
|
export const Circle: Story = {
|
|
args: {
|
|
className: 'size-12 rounded-full',
|
|
},
|
|
}
|
|
|
|
export const CardSkeleton: Story = {
|
|
render: () => (
|
|
<div className="flex items-center space-x-4">
|
|
<Skeleton className="size-12 rounded-full" />
|
|
<div className="space-y-2">
|
|
<Skeleton className="h-4 w-62.5" />
|
|
<Skeleton className="h-4 w-50" />
|
|
</div>
|
|
</div>
|
|
),
|
|
}
|
|
|
|
export const FormSkeleton: Story = {
|
|
render: () => (
|
|
<div className="space-y-4 w-75">
|
|
<div className="space-y-2">
|
|
<Skeleton className="h-4 w-20" />
|
|
<Skeleton className="h-9 w-full" />
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Skeleton className="h-4 w-30" />
|
|
<Skeleton className="h-9 w-full" />
|
|
</div>
|
|
<Skeleton className="h-9 w-25" />
|
|
</div>
|
|
),
|
|
}
|
|
|
|
export const TextBlock: Story = {
|
|
render: () => (
|
|
<div className="space-y-2 w-87.5">
|
|
<Skeleton className="h-4 w-full" />
|
|
<Skeleton className="h-4 w-full" />
|
|
<Skeleton className="h-4 w-3/4" />
|
|
</div>
|
|
),
|
|
}
|