@Input Interface

export interface ImageDetails {
  fileName: string;
  imageSrc: string;
  imageAlt: string;
  imageSize: string;
  fileSize: string;
  uploadTime: Date;
}

@Input() data: ImageDetails;

export const Default: Story = {
  args: {
    data: {
      fileName: 'Fejhallgato_01.jpg',
      imageSrc: 'assets/images/headphone.jpg',
      imageAlt: 'Headphone',
      imageSize: '300x300',
      fileSize: '323kb',
      uploadTime: new Date(),
    },
  },
};

<div class="image-details">
  <figure class="image-details-figure">
    <img class="image-details-image" [src]="data.imageSrc" [alt]="data.imageAlt" />
  </figure>
  <div class="image-details-body">
    <h5 class="image-details-filename">{{ data.fileName }}</h5>
    <div class="image-details-meta">
      <span class="image-details-meta-key">{{ 'STORAGE.SIZE' | transloco }}: </span>
      <span class="image-details-meta-value">{{ data.imageSize }}</span>
    </div>
    <div class="image-details-meta">
      <span class="image-details-meta-key">{{ 'STORAGE.FILE_SIZE' | transloco }}: </span>
      <span class="image-details-meta-value">{{ data.fileSize }}</span>
    </div>
    <div class="image-details-meta">
      <span class="image-details-meta-key">{{ 'STORAGE.UPLOADED' | transloco }}: </span>
      <span class="image-details-meta-value">{{ data.uploadTime | date: 'yyyy.MM.dd hh:mm' }}</span>
    </div>
  </div>
</div>