46 lines
1.2 KiB
Vue

<template>
<ds-space centered margin="xxx-small">
<ds-space margin-bottom="small" />
<ds-heading tag="h4">
{{ $t('contribution.comment.commenting-disabled.blocked-author.reason') }}
</ds-heading>
<ds-text>
{{ $t('contribution.comment.commenting-disabled.blocked-author.call-to-action') }}
</ds-text>
<os-button as="nuxt-link" :to="authorLink" variant="primary" appearance="filled">
<template #icon><os-icon :icon="icons.arrowRight" /></template>
{{
$t('contribution.comment.commenting-disabled.blocked-author.button-label', {
name: author.name,
})
}}
</os-button>
</ds-space>
</template>
<script>
import { OsButton, OsIcon } from '@ocelot-social/ui'
import { iconRegistry } from '~/utils/iconRegistry'
export default {
name: 'CtaUnblockAuthor',
components: { OsButton, OsIcon },
props: {
author: {
type: Object,
required: true,
validator: (value) => 'id' in value && 'slug' in value && 'name' in value,
},
},
computed: {
authorLink() {
const { id, slug } = this.author
return { name: 'profile-id-slug', params: { slug, id } }
},
},
created() {
this.icons = iconRegistry
},
}
</script>