mirror of
https://github.com/lingble/chatwoot.git
synced 2025-11-04 04:57:51 +00:00
3a334be582
This pull request introduces a new `ChannelIcon` component and refactors the existing code to use this component, which simplifies the icon management for different channel types and providers.
42 lines
954 B
Vue
42 lines
954 B
Vue
<script setup>
|
|
import { computed } from 'vue';
|
|
import Icon from 'next/icon/Icon.vue';
|
|
import ChannelIcon from 'next/icon/ChannelIcon.vue';
|
|
|
|
const props = defineProps({
|
|
label: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
active: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
inbox: {
|
|
type: Object,
|
|
required: true,
|
|
},
|
|
});
|
|
|
|
const reauthorizationRequired = computed(() => {
|
|
return props.inbox.reauthorization_required;
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<span
|
|
class="size-4 grid place-content-center rounded-full bg-n-alpha-2"
|
|
:class="{ 'bg-n-solid-blue': active }"
|
|
>
|
|
<ChannelIcon :inbox="inbox" class="size-3" />
|
|
</span>
|
|
<div class="flex-1 truncate min-w-0">{{ label }}</div>
|
|
<div
|
|
v-if="reauthorizationRequired"
|
|
v-tooltip.top-end="$t('SIDEBAR.REAUTHORIZE')"
|
|
class="grid place-content-center size-5 bg-n-ruby-5/60 rounded-full"
|
|
>
|
|
<Icon icon="i-woot-alert" class="size-3 text-n-ruby-9" />
|
|
</div>
|
|
</template>
|