<template>
  <div class="link-block">
    <link-icon class="link-block__icon"></link-icon>
    <a :href="value.url" class="link-block__link" target="_blank">{{value.text}}</a>
  </div>
</template>

<script>
  import LinkIcon from '@/components/icons/LinkIcon';

  export default {
    props: ['value'],

    components: {
      LinkIcon
    }
  }
</script>

<style scoped lang="scss">
  .link-block {
    margin-bottom: 30px;
    display: grid;
    grid-template-columns: 50px 1fr;
    align-items: center;

    &__icon {
      width: 30px;
      height: 30px;
    }

    &__link {
      text-decoration: underline;
    }
  }
</style>
