opendesk

1<template>
2  <div
3    class="flex size-8 cursor-pointer items-center justify-center rounded-full bg-surface-gray-2 hover:bg-surface-gray-3"
4    :class="{ 'ring-2 ring-outline-blue-4': selected }"
5  >
6    <img v-if="logoValue" :src="logoValue" class="size-4.5" />
7    <LucideMail v-else class="size-4.5 text-ink-gray-7" />
8  </div>
9  <p v-if="serviceName" class="text-center text-p-xs text-ink-gray-7">
10    {{ serviceName }}
11  </p>
12</template>
13
14<script setup lang="ts">
15import { computed } from "vue";
16import LucideMail from "~icons/lucide/mail";
17
18interface P {
19  serviceName?: string;
20  logo?: string;
21  selected?: boolean;
22}
23
24const props = withDefaults(defineProps<P>(), {
25  serviceName: "",
26  selected: false,
27  logo: "",
28});
29
30const logoValue = computed(() => props.logo);
31</script>
32
33<style scoped></style>
34