import { Meta, Canvas, Props, Story } from "@storybook/blocks";
import {
  ComponentHeading,
  ComponentStatus,
  COMPONENT_STATUS,
  EnumTable,
} from "../../storybook-components";
import { ORIENTATION } from "../..";
import { Aside } from "./Aside";

<Meta title="Deprecated/Components/Move to app/Aside" component={Aside} />

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

<ComponentStatus status={COMPONENT_STATUS.DEPRECATED} />

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

<Canvas>
  <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>
</Canvas>

## Props

### Aside

<Props of={Aside} />

### Aside.Item

<Props of={Aside.Item} />

### Aside.Divider

<Props of={Aside.Divider} />

<EnumTable enums={{ ORIENTATION }} />