psp_panel/src/app/shared/components/key-value.component/key-value.component.html

<div class="inline-flex w-full flex-col gap-1">
  <div class="inline-flex w-full items-center gap-2">
    <span class="text-muted-color flex-auto grow-0 text-base font-normal">{{ label }}:</span>
    <div
      class="text-text-color shrink-0 grow text-base font-bold max-sm:text-left"
      [ngClass]="{
        'text-right': alignment === 'start',
        'text-center': alignment === 'center',
        'text-left': alignment === 'end',
      }">
      <ng-content>
        @if (type === 'thumbnail') {
          <div class="bg-surface-100 h-20 w-20 cursor-pointer overflow-hidden rounded-2xl">
            @if (valueToShow()) {
              <img [src]="valueToShow()" class="h-full w-full object-cover" />
            }
          </div>
        } @else if (valueType() === 'tag') {
          <p-tag [value]="valueToShow()?.toString()" [severity]="value ? 'contrast' : 'danger'" />
        } @else {
          <span class="text-text-color grow text-base font-bold"> {{ valueToShow() }}</span>
        }
      </ng-content>
    </div>
  </div>
  @if (hint) {
    <span class="text-muted-color text-sm font-normal">{{ hint }}</span>
  }
</div>