opendesk

1<template>
2  <div class="flex items-center justify-between py-2" v-bind:class="$attrs">
3    <div class="flex items-center gap-x-3 w-4/5">
4      <Avatar :image="agent.user_image" :label="agent.agent_name" size="xl" />
5      <div>
6        <div class="flex items-center gap-2">
7          <p class="text-base">
8            {{ agent.agent_name }}
9          </p>
10          <Badge
11            v-if="showStatus"
12            :label="'Inactive'"
13            :theme="'gray'"
14            :class="
15              showStatus && !agent.is_active ? 'opacity-100' : 'opacity-0'
16            "
17            variant="subtle"
18          />
19        </div>
20        <div class="text-base text-ink-gray-6 mt-1">
21          {{ agent.name }}
22        </div>
23      </div>
24    </div>
25    <!-- slot here -->
26    <slot name="right" />
27  </div>
28</template>
29
30<script setup lang="ts">
31import { Avatar } from "frappe-ui";
32
33defineProps({
34  agent: {
35    type: Object,
36    required: true,
37  },
38  showStatus: {
39    type: Boolean,
40    default: false,
41  },
42});
43</script>
44
45<style scoped></style>
46