38 lines
1.4 KiB
TypeScript
38 lines
1.4 KiB
TypeScript
import { Component, computed, inject, input } from '@angular/core';
|
|
import { Recipe } from '../../../models/Recipe.model';
|
|
import { RouterLink } from '@angular/router';
|
|
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';
|
|
|
|
@Component({
|
|
selector: 'app-recipe-card',
|
|
imports: [RouterLink, FaIconComponent],
|
|
templateUrl: './recipe-card.html',
|
|
styleUrl: './recipe-card.css',
|
|
})
|
|
export class RecipeCard {
|
|
public recipe = input.required<Recipe>();
|
|
|
|
protected readonly recipePageLink = computed(() => {
|
|
const recipe = this.recipe();
|
|
return ['/recipes', recipe.owner.username, recipe.slug];
|
|
});
|
|
|
|
protected readonly faGlobe = faGlobe;
|
|
protected readonly faLock = faLock;
|
|
protected readonly faUser = faUser;
|
|
protected readonly faStar = faStar;
|
|
|
|
private readonly imageService = inject(ImageService);
|
|
|
|
protected readonly mainImage = injectQuery(() => {
|
|
const recipe = this.recipe();
|
|
return {
|
|
queryKey: ['images', recipe.mainImage.owner.username, recipe.mainImage.filename],
|
|
queryFn: () => this.imageService.getImage(recipe.mainImage.url),
|
|
};
|
|
});
|
|
}
|