feat(purchase-list-item): create purchase list item component with styles and template

src/app/features/store/pages/account-page/components/purchase-list-item/purchase-list-item.scss

@@ -0,0 +1,36 @@
+.purchase-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px;
+  border-bottom: 1px solid #e0e0e0;
+  transition: background-color 0.2s, border-radius 0.2s;
+  cursor: pointer;
+}
+.purchase-item:hover {
+  background-color: #f0f0f0;
+  border-radius: 8px;
+  border-bottom-color: transparent;
+}
+.purchase-item:hover .arrow-icon {
+  color: #5b75ff; /* Blue on hover */
+}
+.purchase-info {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.purchase-id {
+  font-weight: bold;
+  color: #333;
+  font-size: 14px;
+}
+.purchase-date {
+  color: #888;
+  font-size: 12px;
+}
+.arrow-icon {
+  font-size: 24px;
+  color: #888;
+  transition: color 0.2s;
+}

src/app/features/store/pages/account-page/components/purchase-list-item/purchase-list-item.ts

@@ -4,55 +4,8 @@ import { Component, Input } from '@angular/core';
   selector: 'app-purchase-list-item',
   standalone: true,
   imports: [],
-  template: `
-    <div class="purchase-item">
-      <div class="purchase-info">
-        <span class="purchase-id">Compra {{ purchase.id }}.</span>
-        <span class="purchase-date">Fecha de compra: {{ purchase.date }}</span>
-      </div>
-      <div class="purchase-action">
-        <span class="arrow-icon">›</span>
-      </div>
-    </div>
-  `,
-  styles: `
-    .purchase-item {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      padding: 16px;
-      border-bottom: 1px solid #e0e0e0;
-      transition: background-color 0.2s, border-radius 0.2s;
-      cursor: pointer;
-    }
-    .purchase-item:hover {
-      background-color: #f0f0f0;
-      border-radius: 8px;
-      border-bottom-color: transparent;
-    }
-    .purchase-item:hover .arrow-icon {
-      color: #5b75ff; /* Blue on hover */
-    }
-    .purchase-info {
-      display: flex;
-      flex-direction: column;
-      gap: 4px;
-    }
-    .purchase-id {
-      font-weight: bold;
-      color: #333;
-      font-size: 14px;
-    }
-    .purchase-date {
-      color: #888;
-      font-size: 12px;
-    }
-    .arrow-icon {
-      font-size: 24px;
-      color: #888;
-      transition: color 0.2s;
-    }
-  `,
+  templateUrl: './purchase-list-item.html',
+  styleUrl: './purchase-list-item.scss',
 })
 export class PurchaseListItem {
   @Input() purchase!: { id: string; date: string };