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, {useState} from 'react';

import '@clayui/css/lib/css/atlas.css';

export default function App() {
	return (
		<Provider spritemap="/public/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>
	);
}