58 lines
1.1 KiB
Vue
58 lines
1.1 KiB
Vue
<template>
|
|
<div class="entry-count-widget">
|
|
<component :is="icon" />
|
|
<span data-cy="entry-count"
|
|
>{{ entryCount }} <template v-if="verbose">{{ entryCount === 1 ? 'Beitrag' : 'Beiträge' }}</template></span
|
|
>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { defineAsyncComponent } from 'vue';
|
|
import SpeechBubbleIcon from '@/components/icons/SpeechBubbleIcon.vue';
|
|
const Cards = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */ '@/components/icons/Cards.vue'));
|
|
|
|
export default {
|
|
props: {
|
|
entryCount: {
|
|
type: Number,
|
|
},
|
|
verbose: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
icon: {
|
|
type: String,
|
|
default: 'cards',
|
|
},
|
|
},
|
|
|
|
components: {
|
|
'speech-bubble': SpeechBubbleIcon,
|
|
SpeechBubbleIcon,
|
|
Cards,
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import 'styles/helpers';
|
|
|
|
.entry-count-widget {
|
|
display: flex;
|
|
align-items: center;
|
|
opacity: 0.6;
|
|
margin-right: $medium-spacing;
|
|
|
|
svg {
|
|
width: 30px;
|
|
fill: $color-charcoal-dark;
|
|
margin-right: 15px;
|
|
}
|
|
|
|
& > span {
|
|
@include room-widget-text-style;
|
|
}
|
|
}
|
|
</style>
|