Placeholder image/logo for recipes without mainImages.

src/app/pages/recipe-page/recipe-page-content/recipe-page-content.html

@@ -40,8 +40,6 @@
                 [height]="recipe.mainImage!.height"
                 [width]="recipe.mainImage!.width"
             />
-        } @else {
-            <p>!! Placeholder todo !!</p>
         }
     }
     <div [innerHTML]="recipe.text"></div>

src/app/shared/components/logo/logo.css

@@ -0,0 +1,13 @@
+div {
+    width: 60px;
+    height: 60px;
+    border-radius: 10px;
+    background-color: var(--primary-red);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.utensils {
+    color: var(--primary-white);
+}

src/app/shared/components/logo/logo.html

@@ -0,0 +1,3 @@
+<div>
+    <fa-icon [icon]="faUtensils" size="2x" class="utensils"></fa-icon>
+</div>

src/app/shared/components/logo/logo.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { Logo } from './logo';
+
+describe('Logo', () => {
+  let component: Logo;
+  let fixture: ComponentFixture<Logo>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [Logo]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(Logo);
+    component = fixture.componentInstance;
+    await fixture.whenStable();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/shared/components/logo/logo.ts

@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+import { FaIconComponent } from '@fortawesome/angular-fontawesome';
+import { faUtensils } from '@fortawesome/free-solid-svg-icons';
+
+@Component({
+    selector: 'app-logo',
+    imports: [FaIconComponent],
+    templateUrl: './logo.html',
+    styleUrl: './logo.css',
+})
+export class Logo {
+    protected readonly faUtensils = faUtensils;
+}

src/app/shared/components/recipe-card-grid/recipe-card/recipe-card.css

@@ -4,6 +4,15 @@
     object-fit: cover;
 }
 
+.recipe-card-image-placeholder {
+    height: 200px;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
 article {
     display: flex;
     flex-direction: column;

src/app/shared/components/recipe-card-grid/recipe-card/recipe-card.html

@@ -4,9 +4,11 @@
         @if (mainImage.isSuccess()) {
             @let maybeMainImageUrl = mainImage.data();
             @if (!!maybeMainImageUrl) {
-                <img [src]="mainImage.data()" id="recipe-card-image" [alt]="recipe.mainImage?.alt" />
+                <img [src]="maybeMainImageUrl" id="recipe-card-image" [alt]="recipe.mainImage!.alt" />
             } @else {
-                <p>!! Placeholder todo !!</p>
+                <div class="recipe-card-image-placeholder">
+                    <app-logo></app-logo>
+                </div>
             }
         }
     </a>

src/app/shared/components/recipe-card-grid/recipe-card/recipe-card.ts

@@ -5,10 +5,11 @@ import { injectQuery } from '@tanstack/angular-query-experimental';
 import { ImageService } from '../../../services/ImageService';
 import { faGlobe, faLock, faStar, faUser } from '@fortawesome/free-solid-svg-icons';
 import { FaIconComponent } from '@fortawesome/angular-fontawesome';
+import { Logo } from '../../logo/logo';
 
 @Component({
     selector: 'app-recipe-card',
-    imports: [RouterLink, FaIconComponent],
+    imports: [RouterLink, FaIconComponent, Logo],
     templateUrl: './recipe-card.html',
     styleUrl: './recipe-card.css',
 })