Add virtual scrolling card component

Add OpenAPI client(s)

src/app/component/items/items.component.html

@@ -1,9 +1,51 @@
-<p-virtualscroller [items]="items" [itemSize]="[50, 100]" orientation="both" styleClass="border border-surface" [style]="{ width: '500px', height: '200px' }">
-  <ng-template #item let-item let-options="options">
-    <div class="flex items-center p-2" [ngClass]="{ 'bg-surface-100 dark:bg-surface-700': options.odd }" style="height: 50px;">
-      <div style="width: 100px">
-        {{ item }}
-      </div>
-    </div>
-  </ng-template>
-</p-virtualscroller>
+<div #container class="size-full overscroll-none">
+  @if (cards.length > 0) {
+    <p-virtualscroller
+      [items]="cards"
+      [itemSize]="580 / 4"
+      [lazy]="true"
+      [loading]="lazyLoading"
+      [appendOnly]="true"
+      (onLazyLoad)="onLazyLoad($event)"
+      styleClass="size-full"
+    >
+      <ng-template [appVirtualScroll]="cards" pTemplate="content" let-options="options">
+        <div class="flex flex-wrap justify-around">
+          @for (card of options.items; track card.id) {
+            <p-card styleClass="w-[24rem] h-[36rem] m-4 overflow-hidden">
+              <ng-template pTemplate="header">
+                <div
+                  class="relative duration-200 w-[23rem] rounded-lg ease-in-out h-64 z-10 overflow-hidden hover:h-[34rem] hover:translate-y-2 m-2 after:absolute after:inset-0 after:shadow-[inset_0_-10px_30px_15px_rgba(0,0,0,0.85)] after:content-[''] hover:inset-0"
+                >
+                  <div class="absolute -inset-0">
+                    <!--suppress AngularNgOptimizedImage -->
+                    <img
+                      alt="Card"
+                      class="w-full h-full object-cover object-center"
+                      src="http://localhost:8080{{ card.imageApiPath }}"
+                    />
+                  </div>
+                </div>
+              </ng-template>
+              <ng-template pTemplate="title"> {{ card.name }}</ng-template>
+              <ng-template pTemplate="subtitle"> Card subtitle</ng-template>
+              <ng-template pTemplate="footer">
+                <div class="flex gap-4 mt-1">
+                  <p-button label="Cancel" severity="secondary" class="w-full" [outlined]="true" styleClass="w-full"/>
+                  <p-button label="Save" class="w-full" styleClass="w-full"/>
+                </div>
+              </ng-template>
+              <p>
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae
+                numquam deserunt
+                quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate
+                neque
+                quas!
+              </p>
+            </p-card>
+          }
+        </div>
+      </ng-template>
+    </p-virtualscroller>
+  }
+</div>