import { ArgTypes, Title, Subtitle } from '@storybook/addon-docs';

<div className="bq-doc__wrapper" data-theme="light">
  <div className="bq-doc__container" >
    <Title>Divider</Title>

    A Divider is a UI component that visually separates or divides different sections or elements of a user interface.
    This can be helpful in creating a clear and organized layout, improving the overall readability of the interface.

    <Subtitle>Usage</Subtitle>

    - Use dividers consistently throughout the interface to maintain a clear and consistent look and feel.
    - Consider using different styles or colors for dividers to indicate different types of sections or elements.
    - Use dividers to create a sense of hierarchy or order within the interface.
    - Avoid overusing dividers, as this can create a cluttered and busy appearance.
    - Avoid using dividers in a way that creates confusion, such as by separating elements that should be considered together.
    - Avoid using dividers in a way that blocks or hides other parts of the interface, reducing visibility and usability.

    <Subtitle>👍 When to use</Subtitle>

    - Use a divider component to visually separate or divide different sections or elements of a user interface.
    - Use a divider component to create clear boundaries between different sections or elements, such as between different sections of content or different groups of related items.
    - Use a divider component to group similar items, such as a list of related links or buttons.
    - Use a divider component to create a sense of hierarchy or order within the interface.

    <Title>Properties</Title>

    <ArgTypes of="bq-divider" />
  </div>
</div>
