ihk24/gfi-ihk-2024/stories/sections/tile-grid/TileGridComponent.js

import './tile-grid.scss';
import {createElement, createImage} from "../../_global/scripts/helpers";
import {TileGridData} from "./TileGridData";
import IHKTileGrid from "./tile-grid";
import IHKEventOverviewTiles from "../eventoverview-stage/eventoverview";

export const createTileGrid = ({
  headline = 'Daten und Fakten auf einen Blick',
  tiles = TileGridData,
}) => {
  const section = createElement('section', ['tile-grid']);
  const container = createElement('div', ['container'], null, section);
  createElement('h2', [], headline, container);
  const row = createElement('div', ['row'], null, container);

  tiles.map((group, index) => {
    // ungerade cols bekommen variant-accent und gerade cols bekommen variant-solid
    const variant = index % 2 === 0 ? 'variant-accent' : 'variant-solid';
    const col = createElement('div', ['col', variant], null, row);
    const head = createElement('div', ['tile-head'], null, col);
    const tileLink = createElement('a', ['tile-head-outer'], null, head);
    tileLink.href = group.titleUrl;
    createElement('h3', ['like-h4'], group.title, tileLink);

    group.tiles.map((item) => {
      const tile = createElement('div', ['tile'], null, col);
      // ungerade cols bekommen variant-subtle-secondary und gerade cols bekommen variant-subtle-primary
      const tileVariant = index % 2 === 0 ? 'variant-subtle-secondary' : 'variant-subtle-primary';
      let tileLink;
      if (item.url) {
        tileLink = createElement('a', ['tile-outer', tileVariant], null, tile);
        tileLink.href = item.url;
      } else {
        tileLink = createElement('span', ['tile-outer', tileVariant], null, tile);
      }
      if (item.icon) {
        const iconBox = createElement('div', ['icon'], null, tileLink);
        createImage(item.icon, 220, 220, ['icon'], [], iconBox);
      }
      if (item.dynamicIcon) {
        const iconBox = createElement('div', ['icon','dynamic-icon'], null, tileLink);
        iconBox.classList.add(item.dynamicIcon);
      }
      const p = createElement('p', [], null, tileLink);
      const num = createElement('span', ['number'], item.number, p);
      if (item.unit) {
        createElement('small', [], item.unit, num);
      }
      createElement('span', ['label'], item.label, p);
    })
    new IHKTileGrid($(section));
  })

  return section;
}