Upper Toolbar

import ClayButton, {ClayButtonWithIcon} from '@clayui/button';
import ClayIcon from '@clayui/icon';
import {ClayDropDownWithItems} from '@clayui/drop-down';
import ClayUpperToolbar from '@clayui/upper-toolbar';

const Component = () => {
  return (
    <ClayUpperToolbar>
      <ClayUpperToolbar.Item className="text-left" expand>
        <label className="component-title">{"Foo Bar"}</label>
        <ClayIcon spritemap={spritemap} symbol="lock" />
      </ClayUpperToolbar.Item>
      <ClayUpperToolbar.Input placeholder="Search..." />
      <ClayUpperToolbar.Item>
        <ClayButton.Group>
          <ClayButtonWithIcon
            displayType="secondary"
            onClick={() => {}}
            small
            spritemap={spritemap}
            symbol="angle-left"
          />
          <ClayButtonWithIcon
            displayType="secondary"
            onClick={() => {}}
            small
            spritemap={spritemap}
            symbol="angle-right"
          />
        </ClayButton.Group>
      </ClayUpperToolbar.Item>
      <ClayUpperToolbar.Item>
        <ClayButton displayType="secondary" onClick={() => {}}>
          {"Delete"}
        </ClayButton>
        <ClayButton className="inline-item-after" onClick={() => {}}>
          {"Edit"}
        </ClayButton>
      </ClayUpperToolbar.Item>
      <ClayUpperToolbar.Item>
        <ClayDropDownWithItems
          items={[
            { href: "#one", label: "one" },
            { href: "#two", label: "two" },
            { disabled: true, href: "#three", label: "three" },
            { href: "#four", label: "four" }
          ]}
          spritemap={spritemap}
          trigger={
            <ClayButtonWithIcon
              displayType="unstyled"
              small
              spritemap={spritemap}
              symbol="ellipsis-v"
            />
          }
        />
      </ClayUpperToolbar.Item>
    </ClayUpperToolbar>
  );
};
render(<Component />);