<template>
  <a class='container' v-bind:href='url'>
    <div class='icon'>
      <img v-bind:src='icon' />
    </div>
    <div class='package'>{{pkgname}}</div>
    <div class='name'>{{name}}</div>
  </a>
</template>
<style lang='scss' scoped>
  .container {
    width: 80px;
    display: block;
    .icon{
      width: 64px;
      height: 64px;
      margin: 0 auto;
      img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
      }
    }
    .package {
      margin-top: 8px;
      font-weight: bold;
    }
    .name {
      font-size: 0.8rem;
    }
  }
</style>
<script>
export default {
  props: ['name', 'package', 'path', 'icon'],
  data() {
    return {
      pkgname: this['package']
    }
  },
  computed:{
    url() {
      if(process.browser){
        const url = new URL(location.href);
        return '//' + url.host + this.path;
      }
    }
  }
}
</script>
