Add tabs wrapper

app/components/tab.hbs

@@ -1,8 +1,8 @@
 <LinkTo
   @route={{@route}}
   @models={{if @model (array @model) @models}}
-  @activeClass="text-primary border-primary"
-  class="flex items-center h-10 px-4 py-2 -mb-px text-center bg-transparent border-b-2 -px-1 whitespace-nowrap focus:outline-none"
+  @activeClass="text-primary border-b border-primary"
+  class="flex items-center h-10 px-4 py-2 text-center bg-transparent whitespace-nowrap focus:outline-none"
 >
   {{#if @icon}}
     <@icon class="mr-2" />

app/components/tabs.hbs

@@ -0,0 +1,3 @@
+<div class='flex mb-4 border-b overflow-x-auto overflow-y-hidden'>
+  {{yield}}
+</div>

app/templates/admin/indexes/item.hbs

@@ -1,11 +1,11 @@
 <Headers::H1 @title={{capitalize @model.uid}}/>
 
-<div class="flex mb-4">
+<Tabs>
   <Tab @route="admin.indexes.item.documents" @text="Documents" @model={{@model}} />
   <Tab @route="admin.indexes.item.info" @text="Info" @model={{@model}} />
   <Tab @route="admin.indexes.item.settings" @text="Settings" @model={{@model}} />
   <Tab @route="admin.indexes.item.edit" @text="Edit" @model={{@model}} />
   <Tab @route="admin.indexes.item.delete" @text="Delete" @model={{@model}} />
-</div>
+</Tabs>
 
 {{outlet}}

app/templates/admin/indexes/item/documents/document.hbs

@@ -1,9 +1,9 @@
 {{#let (array @model.index.uid (get @model.document @model.index.primaryKey)) as |models|}}
-  <div class="flex mb-4">
+  <Tabs>
     <Tab @route="admin.indexes.item.documents.document.index" @text="View" @models={{models}} />
     <Tab @route="admin.indexes.item.documents.document.edit" @text="Edit" @models={{models}} />
     <Tab @route="admin.indexes.item.documents.document.delete" @text="Delete" @models={{models}} />
-  </div>
+  </Tabs>
 {{/let}}
 
 {{outlet}}

tests/integration/components/tabs-test.js

@@ -0,0 +1,26 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'meiliadmin/tests/helpers';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Component | tabs', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function (assert) {
+    // Set any properties with this.set('myProperty', 'value');
+    // Handle any actions with this.set('myAction', function(val) { ... });
+
+    await render(hbs`<Tabs />`);
+
+    assert.dom(this.element).hasText('');
+
+    // Template block usage:
+    await render(hbs`
+      <Tabs>
+        template block text
+      </Tabs>
+    `);
+
+    assert.dom(this.element).hasText('template block text');
+  });
+});