ihk24/gfi-ihk-2024/stories/components/magazine-cover/MagazineCoverComponent.js

import './magazine-cover.scss';
import {createElement, createImage} from "../../_global/scripts/helpers";
import {createReadingTime} from "../../atoms/reading-time/ReadingTimeComponent";

export const createMagazineCover = ({
  imageSrc = './dummy/placeholder-4-3.svg',
  showReadingTime = true,
}) => {
  const section = createElement('section', ['magazine-cover']);
  const container = createElement('div', ['container'], null, section);
  const row = createElement('div', ['row'], null, container);
  const col = createElement('div', ['col'], null, row);

  if (showReadingTime) {
    col.appendChild(createReadingTime({}));
  }

  const imageBox = createElement('div', ['image-box'], null, col);
  const picture = createElement('picture', [], null, imageBox);
  const src = createElement('source', [], null, picture);
  createImage(imageSrc, 1110, 440, '', [], picture);

  src.media = '(max-width: 567px)';
  src.srcset = imageSrc.replace('1110x440', '600x400');

  return section;

}