skillbox/client/src/components/content-blocks/DocumentBlock.vue

47 lines
895 B
Vue

<template>
<div class="document-block">
<document-icon class="document-block__icon"></document-icon>
<a :href="value.url" class="document-block__link" target="_blank">{{urlName}}</a>
</div>
</template>
<script>
import DocumentIcon from '@/components/icons/DocumentIcon';
export default {
props: ['value'],
components: {
DocumentIcon
},
computed: {
urlName: function() {
if (this.value && this.value.url) {
const parts = this.value.url.split('/');
return parts[parts.length - 1]
}
return null;
}
}
}
</script>
<style scoped lang="scss">
.document-block {
margin-bottom: 30px;
display: grid;
grid-template-columns: 50px 1fr;
align-items: center;
&__icon {
width: 30px;
height: 30px;
}
&__link {
text-decoration: underline;
}
}
</style>