60 lines
2.0 KiB
TypeScript
60 lines
2.0 KiB
TypeScript
|
import type { Meta, StoryObj } from '@storybook/nextjs'
|
||
|
|
import {
|
||
|
|
SkeletonContainer,
|
||
|
|
SkeletonPoint,
|
||
|
|
SkeletonRectangle,
|
||
|
|
SkeletonRow,
|
||
|
|
} from '.'
|
||
|
|
|
||
|
|
const SkeletonDemo = () => {
|
||
|
|
return (
|
||
|
|
<div className="flex w-full max-w-xl flex-col gap-6 rounded-2xl border border-divider-subtle bg-components-panel-bg p-6">
|
||
|
|
<div className="text-xs uppercase tracking-[0.18em] text-text-tertiary">Loading skeletons</div>
|
||
|
|
<div className="space-y-4 rounded-xl border border-divider-subtle bg-background-default-subtle p-4">
|
||
|
|
<SkeletonContainer>
|
||
|
|
<SkeletonRow>
|
||
|
|
<SkeletonRectangle className="h-4 w-32 rounded-md" />
|
||
|
|
<SkeletonPoint />
|
||
|
|
<SkeletonRectangle className="h-4 w-20 rounded-md" />
|
||
|
|
</SkeletonRow>
|
||
|
|
<SkeletonRow>
|
||
|
|
<SkeletonRectangle className="h-3 w-full" />
|
||
|
|
</SkeletonRow>
|
||
|
|
<SkeletonRow>
|
||
|
|
<SkeletonRectangle className="h-3 w-5/6" />
|
||
|
|
</SkeletonRow>
|
||
|
|
</SkeletonContainer>
|
||
|
|
</div>
|
||
|
|
<div className="space-y-3 rounded-xl border border-divider-subtle bg-background-default-subtle p-4">
|
||
|
|
<SkeletonRow className="items-start">
|
||
|
|
<SkeletonRectangle className="mr-4 h-10 w-10 rounded-full" />
|
||
|
|
<SkeletonContainer className="w-full">
|
||
|
|
<SkeletonRectangle className="h-3 w-1/3" />
|
||
|
|
<SkeletonRectangle className="h-3 w-full" />
|
||
|
|
<SkeletonRectangle className="h-3 w-3/4" />
|
||
|
|
</SkeletonContainer>
|
||
|
|
</SkeletonRow>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
const meta = {
|
||
|
|
title: 'Base/Feedback/Skeleton',
|
||
|
|
component: SkeletonDemo,
|
||
|
|
parameters: {
|
||
|
|
layout: 'centered',
|
||
|
|
docs: {
|
||
|
|
description: {
|
||
|
|
component: 'Composable skeleton primitives (container, row, rectangle, point) to sketch loading states for panels and lists.',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
tags: ['autodocs'],
|
||
|
|
} satisfies Meta<typeof SkeletonDemo>
|
||
|
|
|
||
|
|
export default meta
|
||
|
|
type Story = StoryObj<typeof meta>
|
||
|
|
|
||
|
|
export const Playground: Story = {}
|