ihk24/gfi-ihk-2024/stories/components/contact/ContactComponent.js

import './contact.scss';
import $ from 'jquery';
import {createElement, createImage} from "../../_global/scripts/helpers";
import {ContactData} from "./ContactData";
import IHKContact from "./contact";

export const createContact =
  ({
     headline = 'Ich helfe Ihnen gerne weiter',
     contacts = ContactData,
     contactCount = 2,
     addContainer = false,
   }) => {
    const wrapper = createElement('div', ['contact-wrapper']);
    if (headline && headline.length > 0) {
      createElement('h2', [], headline, wrapper);
    }

    const outer = createElement('div', ['contacts'], null, wrapper);
    contacts.map((data, index) => {
      if (index >= contactCount) {
        return;
      }
      const cp = createElement('div', ['contact-person'], null, outer);
      cp.dataset.contactTab = data.name;

      if (data.image && data.image.length > 0) {
        const ib = createElement('div', ['image-box'], null, cp);
        createImage(data.image, 360, 240, data.name, [], ib);
      }

      const tb = createElement('div', ['text-box'], null, cp);
      createElement('h3', ['like-h6'], data.name, tb);
      createElement('p', [], data.copy, tb);

      const buttons = createElement('ul', ['contact-buttons'], null, tb);
      const classes = ['btn', 'white', 'btn-small', 'icon-left'];
      if (data.phone && data.phone.length > 0) {
        const li = createElement('li', [], null, buttons);
        const a = createElement('a', ['icon-telefon', ...classes], data.phone, li);
        a.href = 'tel:' + data.phone.split('(').join('').split(')').join('');
      }
      if (data.mail && data.mail.length > 0) {
        const li = createElement('li', [], null, buttons);
        const a = createElement('a', ['icon-email', ...classes], 'E-Mail schreiben', li);
        a.href = 'mailto:' + data.mail;
      }
      if (data.fax && data.fax.length > 0) {
        const li = createElement('li', [], null, buttons);
        createElement('span', ['icon-fax', ...classes], data.fax, li);
      }
      if (data.vcard && data.vcard.length > 0) {
        const li = createElement('li', [], null, buttons);
        const a = createElement('a', ['icon-vcard', ...classes], 'Kontakt speichern', li);
        a.href = data.vcard;
      }
    })

    new IHKContact($(wrapper));

    if (addContainer) {
      const section = createElement('section', ['contact']);
      const container = createElement('div', ['container'], null, section);
      container.appendChild(wrapper);
      return section;
    }

    return wrapper;
  }