skillbox/client/src/components/portfolio/ShareLink.vue

49 lines
867 B
Vue

<template>
<a
class="share-icon"
@click="$emit('share')"
>
<share-icon class="share-icon__icon" />
<span class="share-icon__text">
<template v-if="!final">Mit Lehrperson teilen</template>
<template v-else>Nicht mehr teilen</template>
</span>
</a>
</template>
<script>
import { defineAsyncComponent } from 'vue';
const ShareIcon = defineAsyncComponent(() => import('@/components/icons/ShareIcon.vue'));
export default {
props: {
final: {
type: Boolean,
default: false,
},
},
emits: ['share'],
components: { ShareIcon },
};
</script>
<style scoped lang="scss">
@import 'styles/helpers';
.share-icon {
display: flex;
align-items: center;
cursor: pointer;
&__icon {
width: 20px;
height: 20px;
margin-right: $small-spacing;
}
&__text {
@include large-link;
}
}
</style>