Upper Toolbar

import {Provider} from '@clayui/core';
import UpperToolbar from '@clayui/upper-toolbar';
import {ClayDropDownWithItems} from '@clayui/drop-down';
import Button, {ClayButtonWithIcon} from '@clayui/button';
import Icon from '@clayui/icon';
import React from 'react';

export default function App() {
  return (
    <Provider spritemap="/icons.svg">
      <div className="p-4">
        <UpperToolbar>
          <UpperToolbar.Item className="text-left" expand>
            <label className="component-title">{'Foo Bar'}</label>

            <Icon symbol="lock" />
          </UpperToolbar.Item>

          <UpperToolbar.Input placeholder="Search..." />

          <UpperToolbar.Item>
            <Button.Group>
              <ClayButtonWithIcon
                displayType="secondary"
                onClick={() => {}}
                small
                symbol="angle-left"
              />

              <ClayButtonWithIcon
                displayType="secondary"
                onClick={() => {}}
                small
                symbol="angle-right"
              />
            </Button.Group>
          </UpperToolbar.Item>

          <UpperToolbar.Item>
            <Button displayType="secondary" onClick={() => {}}>
              {'Delete'}
            </Button>

            <Button className="inline-item-after" onClick={() => {}}>
              {'Edit'}
            </Button>
          </UpperToolbar.Item>

          <UpperToolbar.Item>
            <ClayDropDownWithItems
              items={[
                {href: '#one', label: 'one'},
                {href: '#two', label: 'two'},
                {
                  disabled: true,
                  href: '#three',
                  label: 'three',
                },
                {href: '#four', label: 'four'},
              ]}
              trigger={
                <ClayButtonWithIcon
                  displayType="unstyled"
                  small
                  symbol="ellipsis-v"
                />
              }
            />
          </UpperToolbar.Item>
        </UpperToolbar>
      </div>
    </Provider>
  );
}