1 files changed, 44 insertions, 0 deletions

diff --git a/src/components/services/tabs/TabBarSortableList.js b/src/components/services/tabs/TabBarSortableList.js
new file mode 100644
index 000000000..c0a68d1a5
--- /dev/null
+++ b/src/components/services/tabs/TabBarSortableList.js
@@ -0,0 +1,44 @@
+import React from 'react';
+import { observer } from 'mobx-react';
+import { SortableContainer } from 'react-sortable-hoc';
+
+import TabItem from './TabItem';
+import { ctrlKey } from '../../../environment';
+
+export default SortableContainer(observer(({
+  services,
+  setActive,
+  reload,
+  toggleNotifications,
+  deleteService,
+  disableService,
+  openSettings,
+}) => (
+  <ul
+    className="tabs"
+  >
+    {services.map((service, index) => (
+      <TabItem
+        key={service.id}
+        clickHandler={() => setActive({ serviceId: service.id })}
+        service={service}
+        index={index}
+        shortcutIndex={index + 1}
+        reload={() => reload({ serviceId: service.id })}
+        toggleNotifications={() => toggleNotifications({ serviceId: service.id })}
+        deleteService={() => deleteService({ serviceId: service.id })}
+        disableService={() => disableService({ serviceId: service.id })}
+        openSettings={openSettings}
+      />
+    ))}
+    <li>
+      <button
+        className="sidebar__add-service"
+        onClick={() => openSettings({ path: 'recipes' })}
+        data-tip={`Add new service (${ctrlKey}+N)`}
+      >
+        <span className="mdi mdi-plus" />
+      </button>
+    </li>
+  </ul>
+)));