Separated recipe list from add button

app/components/recipe-add.hbs

@@ -0,0 +1,5 @@
+<button
+  {{on "click" this.addRecipe}}
+  class="w-full bg-teal-500 hover:bg-teal-400 text-white font-bold mt-4 py-2 px-4 border-b-4 border-teal-700 hover:border-teal-500 rounded">
+  Add Another Recipe
+</button>

app/components/recipe-add.js

@@ -0,0 +1,17 @@
+import Component from '@glimmer/component';
+import { inject as service } from '@ember/service';
+import { task } from 'ember-concurrency';
+import { action } from "@ember/object";
+
+export default class RecipeAddComponent extends Component {
+  @service store;
+
+  @(task(function * () {
+    return yield this.store.queryRecord('meal', 'random');
+  })) fetchRecipe;
+
+  @action
+  async addRecipe() {
+    await this.fetchRecipe.perform();
+  }
+}

app/components/recipe-list.hbs

@@ -1,20 +1,16 @@
-<SortableGroup
-  @model={{this.items}}
-  @onChange={{action this.reorderItems}}
-  as |group|>
-  {{#each group.model as |meal|}}
-    <group.item
-      @model={{meal}}
-      as |item|>
-      <item.handle>
-        <RecipePreview @meal={{meal}} {{on "click" this.openMealDetails}} />
-      </item.handle>
-    </group.item>
-  {{/each}}
-</SortableGroup>
-
-<button
-  {{on "click" this.addRecipe}}
-  class="w-full bg-teal-500 hover:bg-teal-400 text-white font-bold mt-4 py-2 px-4 border-b-4 border-teal-700 hover:border-teal-500 rounded">
-  Add Another Recipe
-</button>
+<div class="rounded-md shadow-md">
+  <SortableGroup
+    @model={{this.items}}
+    @onChange={{action this.reorderItems}}
+    as |group|>
+    {{#each group.model as |meal|}}
+      <group.item
+        @model={{meal}}
+        as |item|>
+        <item.handle>
+          <RecipePreview @meal={{meal}} {{on "click" this.openMealDetails}} />
+        </item.handle>
+      </group.item>
+    {{/each}}
+  </SortableGroup>
+</div>

app/components/recipe-list.js

@@ -2,7 +2,6 @@ import Component from '@glimmer/component';
 import { tracked } from "@glimmer/tracking";
 import { action } from "@ember/object";
 import { A } from '@ember/array';
-import { task } from 'ember-concurrency';
 import { inject as service } from '@ember/service';
 
 export default class RecipeListComponent extends Component {
@@ -19,17 +18,8 @@ export default class RecipeListComponent extends Component {
     this.items = items;
   }
 
-  @(task(function * () {
-    return yield this.store.queryRecord('meal', 'random');
-  })) fetchRecipe;
-
   @action
   reorderItems(reorderedItems) {
     this.items = reorderedItems;
   }
-
-  @action
-  async addRecipe() {
-    await this.fetchRecipe.perform();
-  }
 }

app/templates/application.hbs

@@ -3,6 +3,7 @@
 <div class="flex p-4">
   <div class="w-2/6">
     <RecipeList />
+    <RecipeAdd />
   </div>
   <div class="w-4/6 pl-4">
     {{outlet}}

tests/integration/components/recipe-add-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 | recipe-add', 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`<RecipeAdd />`);
+
+    assert.equal(this.element.textContent.trim(), '');
+
+    // Template block usage:
+    await render(hbs`
+      <RecipeAdd>
+        template block text
+      </RecipeAdd>
+    `);
+
+    assert.equal(this.element.textContent.trim(), 'template block text');
+  });
+});