1 files changed, 61 insertions, 0 deletions
diff --git a/public/projects/angular-small-apps/apps/recipes/src/app/components/search-results/search-results.component.html b/public/projects/angular-small-apps/apps/recipes/src/app/components/search-results/search-results.component.html
new file mode 100644
index 0000000..53b0d07
--- /dev/null
+++ b/public/projects/angular-small-apps/apps/recipes/src/app/components/search-results/search-results.component.html
@@ -0,0 +1,61 @@
+<ng-container
+  *ngIf="recipes && recipes.length > 0; then recipesList; else notFound"
+></ng-container>
+<ng-template #recipesList>
+  <ul class="recipes-list">
+    <li *ngFor="let recipe of recipes" class="recipes-list__item">
+      <article class="card">
+        <header class="card__header">
+          <img
+            src="{{ recipe.strMealThumb }}"
+            alt="{{ recipe.strMeal }} picture"
+            class="card__thumb"
+          />
+          <h2 class="card__title">{{ recipe.strMeal }}</h2>
+        </header>
+        <div *ngIf="recipe.strInstructions" class="card__body">
+          {{
+            recipe.strInstructions.length > 120
+              ? (recipe.strInstructions | slice: 0:120) + "&hellip;"
+              : recipe.strInstructions
+          }}
+        </div>
+        <footer class="card__footer">
+          <dl class="meta">
+            <div class="meta__item" *ngIf="recipe.strCategory">
+              <dt class="meta__term">Category:</dt>
+              <dd class="meta__description">{{ recipe.strCategory }}</dd>
+            </div>
+            <div class="meta__item" *ngIf="recipe.strTags">
+              <dt class="meta__term">Tags:</dt>
+              <dd class="meta__description">
+                {{ recipe.strTags | formatComma }}
+              </dd>
+            </div>
+          </dl>
+          <a
+            [routerLink]="['/recipe/', recipe.strMeal | slugify]"
+            [state]="{ id: recipe.idMeal }"
+            class="btn"
+          >
+            Read more
+            <span class="btn__icon"> &rightarrow;</span>
+          </a>
+        </footer>
+      </article>
+    </li>
+  </ul>
+  <a routerLink="" class="btn">
+    <span class="btn__icon">&leftarrow; </span>Back to recipes
+  </a>
+</ng-template>
+<ng-template #notFound>
+  <div class="not-found">
+    <div class="not-found__result">
+      No recipe match your query: {{ query }}.
+    </div>
+    <a routerLink="" class="btn">
+      <span class="btn__icon">&leftarrow; </span>Back to your recipes
+    </a>
+  </div>
+</ng-template>