42 lines
1.2 KiB
Svelte
42 lines
1.2 KiB
Svelte
|
<script module>
|
||
|
|
import { defineMeta } from '@storybook/addon-svelte-csf';
|
||
|
|
import Skeleton from './Skeleton.svelte';
|
||
|
|
|
||
|
|
const { Story } = defineMeta({
|
||
|
|
title: 'Shared/Skeleton',
|
||
|
|
tags: ['autodocs'],
|
||
|
|
parameters: {
|
||
|
|
docs: {
|
||
|
|
description: {
|
||
|
|
component:
|
||
|
|
'Skeleton component for loading states. Displays a shimmer animation when `animate` prop is true.',
|
||
|
|
},
|
||
|
|
story: { inline: false }, // Render stories in iframe for state isolation
|
||
|
|
},
|
||
|
|
},
|
||
|
|
argTypes: {
|
||
|
|
animate: {
|
||
|
|
control: 'boolean',
|
||
|
|
description: 'Whether to show the shimmer animation',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<Story
|
||
|
|
name="Default"
|
||
|
|
args={{
|
||
|
|
animate: true,
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<div class="flex flex-col gap-4 p-4 w-full">
|
||
|
|
<div class="flex flex-col gap-2 p-4 border rounded-xl border-gray-200/50 bg-white/40">
|
||
|
|
<div class="flex items-center justify-between mb-4">
|
||
|
|
<Skeleton class="h-8 w-1/3" />
|
||
|
|
<Skeleton class="h-8 w-8 rounded-full" />
|
||
|
|
</div>
|
||
|
|
<Skeleton class="h-32 w-full" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</Story>
|