ifmeorg/ifme

<div class="gridManyItem center">
  <%= react_component('Modal', props: {
    element: {
      component: 'Avatar',
      props: {
        src: ProfilePicture.normalize_url(contributor_blurb["image"]),
        alt: t('pages.contribute.contributor_avatar_alt',
          name: contributor_blurb['name']
        )
      }
    },
    body: <<~HEREDOC
    <div class="contributorModalBody">
      <div class="contributorModalBodyPhoto hideOnSmall">
        <img class="contributorAvatar" src="#{ProfilePicture.normalize_url(contributor_blurb["image"])}" alt="">
      </div>
      <div class="contributorModalBodyCopy">
        <div class="contributorModalHeader">
          <div class="contributorModalBodyPhoto showOnSmall">
              <img class="contributorAvatar" src="#{ProfilePicture.normalize_url(contributor_blurb["image"])}" alt="">
          </div>
          <div>
            <div role="heading" class="contributorModalName">
              #{contributor_blurb["name"]}
            </div>
            <div class="contributorModalBodySocialLinks">
              <div class="socialLink">
                <i class="fa fa-location-arrow fa-inline"></i>#{contributor_blurb["location"]}
              </div>
              <div class="socialLink">
                <i class="#{get_icon_class(contributor_blurb["social"])} fa-inline"></i>
                #{link_to(contributor_blurb["link_name"], contributor_blurb["link"], target: 'blank')}
              </div>
            </div>
          </div>
        </div>
        <p>#{contributor_blurb["profile"]}</p>
      </div>
    HEREDOC
  }) %>
</div>