job.component.html

<div class="tw-max-w-3xl tw-mx-auto">
  <div class="tw-w-full">
    <p class="tw-text-lg tw-font-semibold tw-my-3">Search for your dream job...!</p>
    <div class="tw-flex tw-gap-x-3">
        <input class="tw-h-8 tw-shadow-md tw-border tw-rounded-md tw-border-light-gray tw-w-full tw-flex-1 tw-px-2" placeholder="Location, Title,...">
        <button type="button" class="tw-h-8 tw-shadow-md tw-border tw-border-light-gray tw-rounded-md tw-bg-sky tw-px-3">Search</button>
    </div>
    <p class="tw-text-lg tw-font-semibold tw-mt-3">Suggested keywords:</p>
    <div class="tw-flex tw-flex-wrap tw-gap-x-3 tw-gap-y-1 tw-my-3">
      <a class="tw-border tw-p-1" *ngFor="let item of tagItems">{{ item }}</a>
    </div>
  </div>
  <div class="tw-flex tw-flex-row tw-flex-wrap tw-mt-6">
    <nz-card
      *ngFor="let job of jobList?.rows; let idx = index"
      class="tw-w-full tw-my-1"
      [nzTitle]="job.title"
      [nzExtra]="companyLink"
    >
      <ng-template #companyLink>
        <a href="{{ job.company_url }}">{{ job.company_url }}</a>
      </ng-template>
      <div class="tw-flex tw-flex-row tw-flex-wrap tw-gap-3">
        <div class="tw-pointer-events-auto tw-flex">
          <nz-avatar
            nzShape="square"
            [nzSize]="64"
            class="tw-my-auto"
            [nzSrc]="'https://loremflickr.com/200/200?random=' + rand() + idx"
          ></nz-avatar>
        </div>
        <div>
          <p>Created at: {{ job.created_at | date : "dd/MM/YYYY" }}</p>
          <p>Company name: {{ job.company }}</p>
          <p>Location: {{ job.location }}</p>
        </div>
        <div class="tw-flex-grow tw-grid tw-justify-end ">
            <button routerLink="/jobs/detail/{{job.id}}" class="tw-h-10 tw-px-2 tw-border tw-rounded-lg hover:tw-bg-black hover:tw-text-white tw-transition">
              See detail
          </button>
        </div>
      </div>
    </nz-card>

    <div class="tw-w-full tw-grid tw-justify-items-center tw-my-3">
      <nz-pagination
        (nzPageIndexChange)="onPageIndexChange($event)"
        [nzPageIndex]="pageIndex"
        [nzPageSize]="pageSize"
        [nzTotal]="jobList?.itemCount || 0 * 10"
      >
      </nz-pagination>
    </div>
  </div>
</div>