feat: add Tailwind CSS and update component styles

.postcssrc.json

@@ -0,0 +1,5 @@
+{
+    "plugins": {
+      "@tailwindcss/postcss": {}
+    }
+}

package.json

@@ -20,8 +20,11 @@
     "@angular/platform-server": "^19.2.0",
     "@angular/router": "^19.2.0",
     "@angular/ssr": "^19.2.8",
+    "@tailwindcss/postcss": "^4.1.5",
     "express": "^4.18.2",
+    "postcss": "^8.5.3",
     "rxjs": "~7.8.0",
+    "tailwindcss": "^4.1.5",
     "tslib": "^2.3.0",
     "zone.js": "~0.15.0"
   },

src/app/app.component.html

@@ -1,3 +1,3 @@
-<h1>Shopping Cart</h1>
-
-<app-product-overview></app-product-overview>
+<div class="container mx-auto p-4 m-3 flex justify-center items-center min-h-screen">
+  <app-product-overview></app-product-overview>
+</div>

src/app/product-overview/product-overview.component.html

@@ -1,6 +1,17 @@
-<app-product-selection (productChange)="onProductChange($event)" (quantityChange)="onQuantityChange($event)"></app-product-selection>
-<app-product-quantity [product]="selectedProduct()" (quantityChange)="onQuantityChange($event)"></app-product-quantity>
+<div class="flex flex-col gap-6 p-6 max-w-lg mx-auto bg-white rounded-lg shadow-md">
+  <app-product-selection 
+    (productChange)="onProductChange($event)" 
+    (quantityChange)="onQuantityChange($event)"
+    class="w-full">
+  </app-product-selection>
+  
+  <app-product-quantity 
+    [product]="selectedProduct()" 
+    (quantityChange)="onQuantityChange($event)"
+    class="w-full">
+  </app-product-quantity>
 
-<div>
-    <p>Total: {{ total() | currency : 'EUR' : 'symbol' : '1.2-2' }}</p>
+  <div class="mt-4 border-t pt-4 min-h-[40px]">
+    <p class="text-xl font-semibold text-right">Total: {{ total() | currency : 'EUR' : 'symbol' : '1.2-2' }}</p>
+  </div>
 </div>

src/app/product-quantity/product-quantity.component.html

@@ -1 +1,11 @@
-<input type="number" [ngModel]="quantity" (ngModelChange)="onQuantityChange($event)" [disabled]="!product" min="1">
+<div class="min-h-[90px]">
+  <div class="mb-2 font-medium text-gray-700">Quantity</div>
+  <input 
+    type="number" 
+    [ngModel]="quantity" 
+    (ngModelChange)="onQuantityChange($event)" 
+    [disabled]="!product" 
+    min="1"
+    class="block w-full h-[42px] px-4 py-2 text-gray-700 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:opacity-50 disabled:cursor-not-allowed"
+  >
+</div>

src/app/product-quantity/product-quantity.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output, signal } from '@angular/core';
 import { Product } from '../product-selection/product-selection.component';
 import { FormsModule } from '@angular/forms';
 import { ProductService } from '../services/product.service';
@@ -11,6 +11,7 @@ import { ProductService } from '../services/product.service';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ProductQuantityComponent {
+
   @Input({ required: true }) set product(value: Product | null) {
     this.productService.setProduct(value);
   }

src/app/product-selection/product-selection.component.html

@@ -1,4 +1,21 @@
-<select [ngModel]="selectedProduct()" (ngModelChange)="onProductChange($event)">
-  <option [ngValue]="null">Select a product</option>
-  <option *ngFor="let product of products()" [ngValue]="product">{{ product.title }} - {{ product.price | currency : 'EUR' : 'symbol' : '1.2-2' }}</option>
-</select>
+<div class="min-h-[120px]">
+  <ng-container *ngIf="isProductLoading()">
+    <div class="flex items-center justify-center h-[72px] p-4 text-gray-500 border border-gray-300 rounded-md">
+      <svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-blue-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+      </svg>
+      Loading...
+    </div>
+  </ng-container>
+  <ng-container *ngIf="!isProductLoading()">
+    <div class="mb-2 font-medium text-gray-700">Select Product</div>
+    <select 
+      [ngModel]="selectedProduct()" 
+      (ngModelChange)="onProductChange($event)"
+      class="block w-full h-[42px] px-4 py-2 text-gray-700 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
+      <option [ngValue]="null">Select a product</option>
+      <option *ngFor="let product of products()" [ngValue]="product">{{ product.title }} - {{ product.price | currency : 'EUR' : 'symbol' : '1.2-2' }}</option>
+    </select>
+  </ng-container>
+</div>

src/app/product-selection/product-selection.component.ts

@@ -1,4 +1,4 @@
-import { NgFor } from '@angular/common';
+import { NgFor, NgIf } from '@angular/common';
 import { CurrencyPipe } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { Component, ChangeDetectionStrategy, Output, EventEmitter, signal, inject, computed, OnInit } from '@angular/core';
@@ -20,7 +20,7 @@ export type Product = {
 @Component({
   selector: 'app-product-selection',
   standalone: true,
-  imports: [NgFor, CurrencyPipe, FormsModule],
+  imports: [NgFor, CurrencyPipe, FormsModule, NgIf],
   templateUrl: './product-selection.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
@@ -31,6 +31,8 @@ export class ProductSelectionComponent implements OnInit {
   selectedProduct = signal<Product | null>(null);
 
   quantity = signal<number>(1);
+
+  isProductLoading = signal(true);
   
   @Output() quantityChange = new EventEmitter<number>();
   @Output() productChange = new EventEmitter<Product>();
@@ -38,7 +40,10 @@ export class ProductSelectionComponent implements OnInit {
   private productService = inject(ProductService);
 
   ngOnInit() {
-    this.productService.getProducts().subscribe(products => this.products.set(products));
+    this.productService.getProducts().subscribe(products => {
+      this.products.set(products);
+      this.isProductLoading.set(false);
+    });
   }
 
   onProductChange(selectedProduct: Product) {

src/app/services/product.service.ts

@@ -1,6 +1,6 @@
 import { Injectable, signal, WritableSignal } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
-import { Observable, shareReplay } from 'rxjs';
+import { delay, Observable, shareReplay } from 'rxjs';
 import { Product } from '../product-selection/product-selection.component';
 
 @Injectable({
@@ -12,7 +12,6 @@ export class ProductService {
 
   constructor(private http: HttpClient) {}
 
-  // Local state management
   setProduct(product: Product | null): void {
     this.productSignal.set(product);
     if (product) {
@@ -32,12 +31,15 @@ export class ProductService {
     return this.quantitySignal();
   }
 
-  // API calls
   getProducts(): Observable<any[]> {
-    return this.http.get<any[]>('https://fakestoreapi.com/products');
+    return this.http.get<any[]>('https://fakestoreapi.com/products').pipe(
+      delay(1000)
+    );
   }
 
   getProductById(id: number): Observable<any> {
-    return this.http.get<any>(`https://fakestoreapi.com/products/${id}`);
+    return this.http.get<any>(`https://fakestoreapi.com/products/${id}`).pipe(
+      delay(1000)
+    );
   }
 } 

src/styles.css

@@ -1 +1 @@
-/* You can add global styles to this file, and also import other style files */
+@import "tailwindcss";