import { Canvas, Meta, Controls } from "@storybook/addon-docs/blocks";

import * as SkeletonStories from "./Skeleton.stories";

<Meta of={SkeletonStories} />

# Skeleton

The Skeleton component is a placeholder UI element used to indicate that content is loading. It provides a visual representation of the content's structure before the actual content is loaded, improving the perceived performance and user experience during loading states.

## Usage

<Canvas of={SkeletonStories.Documentation} source={ { code: `
import React from "react";
import { Skeleton } from "@webiny/admin-ui";

const SkeletonExample = () => {
return <Skeleton />;
};

export default SkeletonExample;

` } }
additionalActions={[
{
title: 'Open in GitHub',
onClick: () => {
window.open(
'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/Skeleton/Skeleton.tsx',
'_blank'
);
},
}
]}
/>

<Controls of={SkeletonStories.Documentation} />

```tsx
import React from "react";
import { Skeleton } from "@webiny/admin-ui";

const SkeletonExample = () => {
  return <Skeleton />;
};

export default SkeletonExample;
```

## Examples

### Types

The Skeleton component supports three different types: `area`, `text`, and `thumbnail`.

#### Area

The default type, used for general content areas.

<Canvas of={SkeletonStories.Area} source={ { code: `
import React from "react";
import { Skeleton } from "@webiny/admin-ui";

const AreaSkeletonExample = () => {
return <Skeleton type="area" className="w-1/2 h-32" />;
};

export default AreaSkeletonExample;
` } } />

#### Text

Used for text content, spans the full width of its container.

<Canvas of={SkeletonStories.Text} source={ { code: `
import React from "react";
import { Skeleton } from "@webiny/admin-ui";

const TextSkeletonExample = () => {
return <Skeleton type="text" />;
};

export default TextSkeletonExample;
` } } />

#### Thumbnail

Used for square-shaped content like images or avatars.

<Canvas of={SkeletonStories.Thumbnail} source={ { code: `
import React from "react";
import { Skeleton } from "@webiny/admin-ui";

const ThumbnailSkeletonExample = () => {
return <Skeleton type="thumbnail" />;
};

export default ThumbnailSkeletonExample;
` } } />

### Sizes

The Skeleton component comes in various sizes to match different content dimensions.

#### Extra Small (XS)

<Canvas of={SkeletonStories.ExtraSmall} source={ { code: `
import React from "react";
import { Skeleton } from "@webiny/admin-ui";

const XsSkeletonExample = () => {
return <Skeleton size="xs" />;
};

export default XsSkeletonExample;
` } } />

#### Small (SM)

<Canvas of={SkeletonStories.Small} source={ { code: `
import React from "react";
import { Skeleton } from "@webiny/admin-ui";

const SmSkeletonExample = () => {
return <Skeleton size="sm" />;
};

export default SmSkeletonExample;
` } } />

#### Medium (MD)

<Canvas of={SkeletonStories.Medium} source={ { code: `
import React from "react";
import { Skeleton } from "@webiny/admin-ui";

const MdSkeletonExample = () => {
return <Skeleton size="md" />;
};

export default MdSkeletonExample;
` } } />

#### Large (LG)

<Canvas of={SkeletonStories.Large} source={ { code: `
import React from "react";
import { Skeleton } from "@webiny/admin-ui";

const LgSkeletonExample = () => {
return <Skeleton size="lg" />;
};

export default LgSkeletonExample;
` } } />

#### Extra Large (XL)

<Canvas of={SkeletonStories.ExtraLarge} source={ { code: `
import React from "react";
import { Skeleton } from "@webiny/admin-ui";

const XlSkeletonExample = () => {
return <Skeleton size="xl" />;
};

export default XlSkeletonExample;
` } } />

#### Double Extra Large (XXL)

<Canvas of={SkeletonStories.DoubleExtraLarge} source={ { code: `
import React from "react";
import { Skeleton } from "@webiny/admin-ui";

const XxlSkeletonExample = () => {
return <Skeleton size="xxl" />;
};

export default XxlSkeletonExample;
` } } />

#### Triple Extra Large (3XL)

<Canvas of={SkeletonStories.TripleExtraLarge} source={ { code: `
import React from "react";
import { Skeleton } from "@webiny/admin-ui";

const ThreeXlSkeletonExample = () => {
return <Skeleton size="3xl" />;
};

export default ThreeXlSkeletonExample;
` } } />

### Complex Layouts

You can combine multiple Skeleton components to create more complex loading states.

<Canvas of={SkeletonStories.MultipleAreas} source={ { code: `
import React from "react";
import { Skeleton } from "@webiny/admin-ui";

const MultipleAreasExample = () => {
return (

<div className="flex gap-md">
  <div className="flex flex-col gap-md">
    <Skeleton type="area" className={"w-32 h-32"} />
    <Skeleton type="area" className={"w-32 h-32"} />
  </div>
  <div>
    <Skeleton type="area" className="w-32 h-full" />
  </div>
</div>
); };

export default MultipleAreasExample;
` } } />