import { Meta, Story, ArgsTable, Canvas } from '@storybook/blocks';
import SearchBar from '../SearchBar';
import * as SearchBarStories from './SearchBar.stories';

<Meta of={SearchBarStories} />

# SearchBar

<br />

## `SearchBars` package together an input and button to create custom search bars.

<br />

### Default

<Canvas>
  <Story of={SearchBarStories.Default} />
</Canvas>

## Usage Example

```jsx
import SearchBar from '@appdirect/sfb-theme-components/src/atoms/search-bar/SearchBar';

<SearchBar settings={{
    buttonColor: 'pink',
    backgroundColor: 'violet',
    borderColor: 'fuchsia',
    placeHolder: 'Search',
    cornerRadius: 3,
    borderVisible: true
}} />
```

## Props

<ArgsTable of={SearchBar} />
