psp_panel/src/app/domains/pos/modules/landing/components/grid-view.component.html

<div class="grid 2xl:grid-cols-8 xl:grid-cols-6 lg:grid-cols-4 grid-cols-2 gap-3 flex-wrap">
  @if (loading()) {
    @for (_ of [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 11, 12, 13, 14, 15]; track $index) {
      <div class="flex-1 aspect-[0.9]">
        <p-skeleton width="100%" height="100%"></p-skeleton>
      </div>
    }
  } @else {
    @for (good of visibleGoods(); track good.id) {
      <div class="flex-1 bg-surface-card rounded-lg p-1 shadow-xs" (click)="addProduct(good)">
        <img
          [src]="good.image_url || goodPlaceholder"
          loading="lazy"
          decoding="async"
          class="w-full aspect-[1.3] object-cover rounded-md"
        />
        <div class="mt-2 text-center">
          <span class="text-lg font-bold text-center">
            {{ good.name }}
            @if (!good.is_default_guild_good) {
              <small class="text-xs text-muted-color">*</small>
            }
          </span>
          <div class="flex items-center justify-between mt-1 w-full px-2 my-2">
            <!-- <span [appPriceMask]="good.salePrice" class="text-base font-bold"></span> -->
            <button pButton type="button" icon="pi pi-plus" class="w-full!">انتخاب</button>
          </div>
        </div>
      </div>
    }
  }
</div>
@if (!loading() && hasMore()) {
  <div class="flex justify-center mt-3">
    <button pButton type="button" outlined (click)="loadMore()">نمایش کالاهای بیشتر</button>
  </div>
}