Recipe items

app/components/recipe-list.hbs

@@ -1,21 +1,20 @@
+<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}} />
+      </item.handle>
+    </group.item>
+  {{/each}}
+</SortableGroup>
+
 <button
   {{on "click" this.addRecipe}}
   class="bg-blue-500 hover:bg-blue-400 text-white font-bold py-2 px-4 border-b-4 border-blue-700 hover:border-blue-500 rounded">
   Button
 </button>
-
-<SortableGroup
-  @model={{this.items}}
-  @onChange={{action this.reorderItems}}
-  as |group|>
-  {{#each group.model as |modelItem|}}
-    <group.item
-      @model={{modelItem}}
-      as |item|>
-      <item.handle>
-        <span class="handle">&varr;</span>
-        {{modelItem.strMeal}}
-      </item.handle>
-    </group.item>
-  {{/each}}
-</SortableGroup>

app/components/recipe-preview.hbs

@@ -0,0 +1,19 @@
+<div class="max-w-sm w-full lg:max-w-full lg:flex">
+  <div class="h-48 lg:h-auto lg:w-48 flex-none bg-cover text-center overflow-hidden"
+       style="background-image: url('{{@meal.strMealThumb}}')">
+  </div>
+  <div class="border-r border-b border-l border-gray-400 lg:border-l-0 lg:border-t lg:border-gray-400 bg-white p-4 flex flex-col justify-between leading-normal">
+    <div class="mb-8">
+      <div class="text-gray-900 font-bold text-xl mb-2">
+        {{@meal.strMeal}}
+      </div>
+      <p class="text-gray-700 text-base">
+        Lorem...
+      </p>
+    </div>
+    <div>
+      <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2">#{{@meal.strCategory}}</span>
+      <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2">#{{@meal.strArea}}</span>
+    </div>
+  </div>
+</div>

app/templates/application.hbs

@@ -1,5 +1,11 @@
 <HeaderNav />
 
-<main class="container mx-auto">
-  <RecipeList />
-</main>
+<div class="flex mb-4">
+  <div class="w-1/4">
+    <RecipeList />
+  </div>
+  <div class="w-3/4">
+    Content goes here.
+    {{outlet}}
+  </div>
+</div>

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