import {
  Meta,
  Preview,
  Props,
  Story,
  SourceState,
} from "@storybook/addon-docs/blocks";
import { Flex } from "../Flex";
import { ScrollPane } from "../ScrollPane";
import { TopBar } from "../TopBar";
import { Frame } from "./Frame";

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

# Frame

`Frame` is used to frame the page using CSS grid layout.

There should only be one frame component rendered per route. Frames should not
be nested within each other.

Children passed to `Frame` should be the `Frame.Area` component with a required
`name` defined.

`Frame.Area` components provide layout positioning where presentational or other
layout components can be rendered. No styles or classnames should be passed onto
`Frame.Area`. Padding should be defined on child components of `Frame.Area`.

The order of `Frame.Area` children do not matter because each area component is
assigned to a grid area in CSS. However, logically speaking, the order areas
should follow the same pattern.

Appbar and topbar areas should always render those respective components. The
main area should render the page’s main content, which generally includes a
`ScrollPane`, but can include a more complex layout depending on the
requirements. There are a variety of ways to display content within the main
area; see templates for more detailed examples.

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

export const AppBar = () => (
  <Flex className="items-center text-gray-400 h-appbar w-full px-8">
    appbar
  </Flex>
);

export const Main = () => (
  <Flex className="text-gray-800 w-full p-8">main</Flex>
);

<Preview withSource={SourceState.OPEN}>
  <Story name="Frame">
    <Frame>
      <Frame.Area name="appbar">
        <AppBar />
      </Frame.Area>
      <Frame.Area name="topbar">
        <TopBar leftSlot="topbar" />
      </Frame.Area>
      <Frame.Area name="main">
        <ScrollPane>
          <Main />
        </ScrollPane>
      </Frame.Area>
    </Frame>
  </Story>
</Preview>

## Props

### Frame Props

`children` are required.

### Frame.Area Props

`children` and `name` are required.

<Props of={Frame.Area} />