import { Subtitle, Title, Meta } from '@storybook/addon-docs/blocks'
import { LifecycleTag } from '../../docs/components'

<Meta title="Layout/Main" />

<Title>Main</Title>
<Subtitle>
  A semantic main content wrapper that ensures the content area takes the full
  vertical height of the screen.
</Subtitle>
<LifecycleTag variant="In Development" />

The `Main` component wraps your page content and ensures it takes at least the full vertical height of the screen viewport (`min-h-svh`).

## Usage

### Import

```tsx
import { Main } from '@chainlink/blocks'
```

### Example

```tsx
import { Main, Typography } from '@chainlink/blocks'

export function MyAppLayout() {
  return (
    <Main>
      <Typography variant="h1">Page Title</Typography>
      <Typography>
        This main content area takes full vertical height of the screen.
      </Typography>
    </Main>
  )
}
```