Dual List Box

import {Provider} from '@clayui/core';
import {ClayDualListBox} from '@clayui/form';
import React, {useState} from 'react';

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

export default function App() {
	const moveBoxesOptions = [
		[
			{
				label: 'Discord',
				value: 'discord',
			},
			{
				label: 'Evernote',
				value: 'evernote',
			},
			{
				label: 'Facebook',
				value: 'facebook',
			},
			{
				label: 'LinkedIn',
				value: 'linkedin',
			},
		],
		[
			{
				label: 'Reddit',
				value: 'reddit',
			},
			{
				label: 'Slack',
				value: 'slack',
			},
			{
				label: 'Twitter',
				value: 'twitter',
			},
		],
	];

	const [items, setItems] = useState(moveBoxesOptions);
	const [leftSelected, setLeftSelected] = useState([]);
	const [rightSelected, setRightSelected] = useState([]);

	const [firstSelectBoxItems, secondSelectBoxItems] = items;

	return (
		<Provider spritemap="/public/icons.svg">
			<div className="p-4">
				<ClayDualListBox
					disableLTR={firstSelectBoxItems.length === 0}
					disableRTL={secondSelectBoxItems.length === 0}
					items={items}
					left={{
						label: 'In Use',
						onSelectChange: setLeftSelected,
						selected: leftSelected,
					}}
					onItemsChange={setItems}
					right={{
						label: 'Available',
						onSelectChange: setRightSelected,
						selected: rightSelected,
					}}
					size={8}
				/>
			</div>
		</Provider>
	);
}