Add tab component

app/components/tab.hbs

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

app/templates/admin.hbs

@@ -19,7 +19,7 @@
     </div>
   </div>
 
-  <div class="flex-1">
+  <div class="flex-1 p-4">
     {{outlet}}
   </div>
 </div>

app/templates/admin/indexes/item.hbs

@@ -1,5 +1,10 @@
 {{page-title "Item"}}
 
-<h1>{{@model.name}}</h1>
+<h1 class="text-2xl mb-4">{{capitalize @model.name}}</h1>
+
+
+<div class="flex border-b">
+  <Tab @route="admin.indexes.item.index" @text="Data" />
+</div>
 
 {{outlet}}

tests/integration/components/tab-test.js

@@ -0,0 +1,26 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Component | tab', 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`<Tab />`);
+
+    assert.dom(this.element).hasText('');
+
+    // Template block usage:
+    await render(hbs`
+      <Tab>
+        template block text
+      </Tab>
+    `);
+
+    assert.dom(this.element).hasText('template block text');
+  });
+});