ihk24/storybook/stories/components/artwork/ArtworkComponent.js

import './artwork.scss';
import {createElement, createImage} from "../../_global/scripts/helpers";

export const createArtwork =
  ({
    type = 'artwork-image',
    image = 'Berlin',
  }) => {
    let imageId, imageWidth, imageHeight;
    const artworkWrapper = createElement('div', ['artwork-wrapper'], null);
    artworkWrapper.dataset.type = type;
    createElement('div', ['artwork'], '<span class="background"></span><span class="foreground"></span>', artworkWrapper);

    if (image === 'Hamburg') {
      imageId = 'qpemSW6_1Z0';
    } else if (image === 'Berlin') {
      imageId = 'uFGi0_YciE0';
    } else if (image === 'Team') {
      imageId = '-VHQ0cw2euA';
    }

    if (type === 'artwork-image') {
      imageWidth = 800;
      imageHeight = 800;
    } else {
      imageWidth = 1920;
      imageHeight = 1080;
    }

    if (type === 'artwork-image' || type === 'background-image' || type === 'artwork-background-image') {
      const imageBox = createElement('div', ['image-box'], null, artworkWrapper);
      const picture = createElement('picture', [], null, imageBox);
      createImage('https://source.unsplash.com/' + imageId + '/' + imageWidth + 'x' + imageHeight, imageWidth, imageHeight, 'Artwork Image', [], picture);
    }

    return artworkWrapper;
  }