<template>
  <ul class="contact-footer">
    <li class="mr-4 box_shadow" v-for="(item,index) in contactFooter" :key="index">
      <a :href="item.link" target="_blank">
        <b-img :src="item.icon" :alt="item.alt"></b-img>
      </a>
    </li>
  </ul>
</template>

<script>

export default {
  name: 'ContactFooter',
  data() {
    return {
      contactFooter: [
        {
          icon: require('../assets/image/icon/Facebook-colorful.png'),
          link: 'javascript:;',
          alt: 'Facebook'
        },
        {
          icon: require('../assets/image/icon/X-colorful.png'),
          link: 'javascript:;',
          alt: 'X'
        },
        {
          icon: require('../assets/image/icon/in-colorful.png'),
          link: 'javascript:;',
          alt: 'in'
        },
        {
          icon: require('../assets/image/icon/google-colorful.png'),
          link: 'javascript:;',
          alt: 'google'
        },
        {
          icon: require('../assets/image/icon/YouTube-colorful.png'),
          link: 'javascript:;',
          alt: 'YouTube'
        },
        {
          icon: require('../assets/image/icon/fax-colorful.png'),
          link: 'javascript:;',
          alt: 'fax'
        }
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
.contact-footer {
  height: 3.5rem;
  margin: .625rem 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f0f3f8;
  border-radius: .375rem;
}
</style>
