Add reusable marketplace product card

src/app/components/product-card/product-card.component.ts

@@ -0,0 +1,38 @@
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
+import { DecimalPipe } from '@angular/common';
+import { RouterLink } from '@angular/router';
+import { Item } from '../../models';
+import { LangRoutePipe } from '../../pipes/lang-route.pipe';
+import { getBadgeClass, getDiscountedPrice, getMainImage } from '../../utils/item.utils';
+
+export type ProductCardAppearance = 'standard' | 'compact';
+
+@Component({
+  selector: 'app-product-card',
+  standalone: true,
+  imports: [DecimalPipe, RouterLink, LangRoutePipe],
+  templateUrl: './product-card.component.html',
+  styleUrls: ['./product-card.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class ProductCardComponent {
+  @Input({ required: true }) item!: Item;
+  @Input() title = '';
+  @Input() description = '';
+  @Input() addToCartLabel = 'Add to cart';
+  @Input() appearance: ProductCardAppearance = 'standard';
+  @Input() showDescription = false;
+  @Input() showStock = true;
+  @Input() showRating = true;
+
+  @Output() addToCart = new EventEmitter<{ itemID: number; event: Event }>();
+  @Output() preview = new EventEmitter<number>();
+
+  readonly getMainImage = getMainImage;
+  readonly getDiscountedPrice = getDiscountedPrice;
+  readonly getBadgeClass = getBadgeClass;
+
+  onAddToCart(event: Event): void {
+    this.addToCart.emit({ itemID: this.item.itemID, event });
+  }
+}