import { Meta, Preview, Props, Story } from "@storybook/addon-docs/blocks";
import { ComponentHeading, EnumTable } from "../../storybook-components";
import { ORIENTATION } from "../..";
import { Aside } from "./Aside";

<Meta title="Components/Layout/Aside" component={Aside} />

<ComponentHeading
  componentName="Aside"
  description="Component to help with sidebar layout"
  sourcePath="src/components/Aside/Aside.tsx"
  hideDemosLink
/>

```jsx
import { Aside } from "@aptible/arrow-ds";
```

<Preview>
  <Story name="Aside">
    <div className="h-64">
      <Aside>
        {[0, 1, 2].map((item) => (
          <Aside.Item key={item}>This is the Aside component</Aside.Item>
        ))}
        <Aside.Divider />
        {[0, 1, 2].map((item) => (
          <Aside.Item key={item}>This is the Aside component</Aside.Item>
        ))}
        <Aside.Divider />
        {[0, 1, 2].map((item) => (
          <Aside.Item key={item}>This is the Aside component</Aside.Item>
        ))}
        <Aside.Divider />
        {[0, 1, 2].map((item) => (
          <Aside.Item key={item}>This is the Aside component</Aside.Item>
        ))}
        <Aside.Divider />
        {[0, 1, 2].map((item) => (
          <Aside.Item key={item}>This is the Aside component</Aside.Item>
        ))}
        <Aside.Divider />
        {[0, 1, 2].map((item) => (
          <Aside.Item key={item}>This is the Aside component</Aside.Item>
        ))}
      </Aside>
    </div>
  </Story>
</Preview>

## Props

### Aside

<Props of={Aside} />

### Aside.Item

<Props of={Aside.Item} />

### Aside.Divider

<Props of={Aside.Divider} />

<EnumTable enums={{ ORIENTATION }} />