import { Canvas, Meta, Story, ArgsTable } from "@storybook/addon-docs";

import {
  Examples,
  Example,
  Note,
  Title,
  VariantsTable,
  VariantColumn,
  RowTitles,
  CustomArgsTable,
} from "@calcom/storybook/components";

import { Skeleton, SkeletonAvatar, SkeletonText, SkeletonButton, SkeletonContainer } from "./";

<Meta title="UI/Skeleton" component={Skeleton} />

<Title title="Skeleton" suffix="Brief" subtitle="Version 2.0 — Last Update: 22 Aug 2022" />

## Definition

Skeletons are used as a placeholder to the content while the content is being loaded. It is used to improve the user experience by providing a visual cue that the content is loading.

## Structure

<CustomArgsTable of={Skeleton} />

<Examples title="Skeleton Avatar">
  <Example title="Primary">
    <SkeletonAvatar className="h-8 w-8" />
  </Example>
</Examples>

<Examples title="Skeleton Text">
  <Example title="Primary">
    <SkeletonText className="h-4 w-32" />
  </Example>
</Examples>

<Examples title="Skeleton Button">
  <Example title="Primary">
    <SkeletonButton className="h-8 w-32" />
  </Example>
</Examples>