feat: implement cart component with mock data and styling for improved cart functionality

src/app/shared/components/cart-item/cart-item.component.ts

@@ -0,0 +1,37 @@
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+
+export interface CartItemAttribute {
+  label: string;
+  value: string;
+}
+
+@Component({
+  selector: 'app-cart-item',
+  standalone: true,
+  templateUrl: './cart-item.component.html',
+  styleUrl: './cart-item.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class CartItemComponent {
+  readonly imageUrl = input<string | null>(null);
+  readonly product = input<string>('');
+  readonly originalPrice = input<number | null>(null);
+  readonly discountedPrice = input<number>(0);
+  readonly discountPercentage = input<number | null>(null);
+  readonly attributes = input<CartItemAttribute[]>([]);
+  readonly quantity = input<number>(1);
+
+  protected readonly formattedOriginalPrice = computed(() => {
+    const price = this.originalPrice();
+    return price === null ? null : this.formatCurrency(price);
+  });
+
+  protected readonly formattedDiscountedPrice = computed(() => this.formatCurrency(this.discountedPrice()));
+
+  private formatCurrency(value: number): string {
+    const rounded = Math.round(value);
+    const parts = rounded.toString().split('.');
+    parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, '.');
+    return `$ ${parts.join(',')}`;
+  }
+}