import { Meta, Story, Canvas, Title, ArgsTable, Source } from '@storybook/addon-docs';
import { Section } from '@lendi/ui/Layout';
import * as stories from './Section.stories.tsx';
import { TITLE_COMPONENTS_DECOMISSIONED } from '../../../../../../docs/content.ts';

<Meta title={`${TITLE_COMPONENTS_DECOMISSIONED}/Layout/Section`} component={Section} />

<Title>Section</Title>

A component to control sections of a page layout. This sets vertical padding between sections to provide consistent spacing.

Should be used in conjunction with the `<Wrapper>` component.

## Usage

<Source language='tsx' dark={true} code={`import { Section } from '@lendi/ui/Layout';`} />

## Example
<Canvas>
  <Story name="Example" story={stories.SectionExample} />
</Canvas>

## Props

<ArgsTable />