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-selection/product-selection.component.html

@@ -1,8 +1,21 @@
-<ng-container *ngIf="isProductLoading()">
-  <div>Loading...</div>
-</ng-container>
-<ng-container *ngIf="!isProductLoading()">
-  <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/styles.css

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