## Tabs

### Usage

```jsx
import { Tabs } from 'ui-components';

const leftPanes = [
	{
		title: 'Active',
		count: '28',
		pane: (
			<>
				This is the tab for active content
			</>
		)
	},
	{
		title: 'Inactive',
		count: '3',
		pane: (
			<>
				This is the tab for inactive content
			</>
		)
	}
];

const rightPane = {
	title: (
		<>
			Download
			<SemanticIcon
				name="cloud download"
			/>
		</>
	),
	pane: (
		<>
			This tab shows download instructions
		</>
	)
};

<Tabs
	panes={leftPanes}
	rightPane={rightPane}
	onTabChange={(e, index) => {
		console.log(`Showing tab ${index}`);
	}}
/>
```

### Parameters

* `panes` (required) is an array of tabs and their panes
	* `title` (required) is the tab title
	* `pane` (required) is the React element to display inside the pane
	* `count` is used to indicator the number of results in a pane
* `rightPane` is an optional pane to float right

### Events

* `onTabChange` is the callback handler
	* `e` is the change event
	* `index` is the index of the selected tab