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

52 lines
838 B
Vue

<template>
<div
class="instruction"
v-if="me.isTeacher">
<bulb-icon class="instruction__icon"/>
<a
:href="value.url"
class="instruction__link">{{ text }}</a>
</div>
</template>
<script>
import me from '@/mixins/me';
import BulbIcon from '@/components/icons/BulbIcon';
export default {
props: ['value'],
mixins: [me],
components: {
BulbIcon
},
computed: {
text() {
return this.value.text ? this.value.text : 'Anweisungen'
}
}
}
</script>
<style scoped lang="scss">
@import "@/styles/_mixins.scss";
.instruction {
margin-bottom: 1rem;
display: flex;
align-items: center;
&__icon {
width: 40px;
height: 40px;
margin-right: $small-spacing;
}
&__link {
@include heading-3;
}
}
</style>