import { Meta } from '@storybook/addon-docs'

<Meta title="@baseapp-frontend | designSystem/Scrollbars/Scrollbar" />

# Component Documentation

## Scrollbar

- **Purpose**: A customizable scrollbar component that provides a consistent and styled scrolling experience across different browsers and platforms.
- **Expected Behavior**: Wraps content and provides a custom scrollbar interface that maintains native scrolling functionality while offering a more polished visual appearance.

## Use Cases

- **Current Usage**: Used in containers with overflow content where a custom scrollbar appearance is desired while maintaining native scroll behavior.
- **Potential Usage**: Could be used in:
  - Long content panels
  - Side navigation menus
  - Chat or message windows
  - Code or text editors
  - Lists with many items

## Props

- **children** (ReactNode): The content to be wrapped with the custom scrollbar.
- **sx** (SxProps): Optional Material-UI system props for additional styling.

## Notes

- **Related Components**:
  - SwipeableDrawer: For mobile-friendly scrollable drawers
  - Dialog: For scrollable modal content
  - List: When displaying long lists of items

## Example Usage

```javascript
import { Scrollbar } from '@baseapp-frontend/design-system/web'

const MyComponent = () => {
  return (
    <Scrollbar sx={{ width: 300, height: 300 }}>
      {Array.from({ length: 30 }, (_, i) => (
        <div key={i} style={{ padding: '4px 0' }}>
          Item {i + 1}
        </div>
      ))}
    </Scrollbar>
  )
}

export default MyComponent
```