import { Meta, Story, ArgsTable, Canvas } from '@storybook/blocks';
import { TableContentFromObject, FormOutput } from '../../../../../tools/docTools';
import { headerHomeBarDataMock, headerHomeBarSettingsMock } from '../../../../../../mocks/components/header';
import HeaderHomeBar from '../HeaderHomeBar';
import { configUserLoggedInMock } from '../../../../../../mocks/config';
import * as HeaderHomeBarStories from './HeaderHomeBar.stories';

export const settingsDocs = {};

<Meta of={HeaderHomeBarStories} />

# HeaderHomeBar

<br />

## `HeaderHomeBar` are used to display the logo, search bar, and quick links.

<br />

### Default

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

### With search bar

<Canvas>
  <Story of={HeaderHomeBarStories.WithSearchBar} />
</Canvas>

### With user logged in

<Canvas>
  <Story of={HeaderHomeBarStories.WithUserLoggedIn} />
</Canvas>

## Usage Example

```jsx
import HeaderHomeBar from '@appdirect/sfb-theme-components/src/components/header/atoms/header-home-bar/HeaderHomeBar';

<HeaderHomeBar />
```

## Props

<ArgsTable of={HeaderHomeBar} />

## Schema

### Form Settings

<table>
  <TableContentFromObject obj={settingsDocs} />
</table>

### Form Output

<FormOutput code={HeaderHomeBar.schema().form} />
