import {
  Meta,
  Canvas,
  Story,
  ArgsTable,
  SourceState,
} from "@storybook/blocks";
import { ComponentHeading } from "../../storybook-components";
import { PopoverMenu } from "./PopoverMenu";

<Meta title="Components/Data/Popover Menu" component={PopoverMenu} />

<ComponentHeading
  componentName="PopoverMenu"
  description="Panel with a shadow used for popovers"
  sourcePath="src/components/PopoverMenu/PopoverMenu.tsx"
  hideDemosLink
/>

## Installation

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

## Basic usage

<Canvas withSource={SourceState.OPEN}>
  <Story name="PopoverMenu">
    <PopoverMenu className="p-8 max-w-md">
      This is the PopoverMenu component
    </PopoverMenu>
  </Story>
</Canvas>

## API

<ArgsTable of={PopoverMenu} />