73 lines
1.8 KiB
Vue
73 lines
1.8 KiB
Vue
<template>
|
|
<span
|
|
class="support-brand-icon"
|
|
:class="{ 'support-brand-icon--eitaa': normalized === 'eitaa' }"
|
|
aria-hidden="true"
|
|
>
|
|
<img
|
|
v-if="logoSrc"
|
|
:src="logoSrc"
|
|
:alt="normalized"
|
|
class="support-brand-icon__img"
|
|
draggable="false"
|
|
/>
|
|
<svg v-else viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg" class="support-brand-icon__svg">
|
|
<circle cx="24" cy="24" r="24" fill="#64748B" />
|
|
<path fill="#fff" d="M16 18h16v2H16v-2zm0 5h16v2H16v-2zm0 5h10v2H16v-2z" />
|
|
</svg>
|
|
</span>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { computed } from 'vue'
|
|
import baleLogo from '@/assets/messengers/bale.png'
|
|
import callLogo from '@/assets/messengers/call.svg'
|
|
import eitaaLogo from '@/assets/messengers/eitaa.png'
|
|
import rubikaLogo from '@/assets/messengers/rubika.png'
|
|
import smsLogo from '@/assets/messengers/sms.svg'
|
|
import soroushLogo from '@/assets/messengers/soroush.svg'
|
|
import telegramLogo from '@/assets/messengers/telegram.svg'
|
|
import whatsappLogo from '@/assets/messengers/whatsapp.svg'
|
|
|
|
const LOGOS: Record<string, string> = {
|
|
bale: baleLogo,
|
|
telegram: telegramLogo,
|
|
whatsapp: whatsappLogo,
|
|
rubika: rubikaLogo,
|
|
eitaa: eitaaLogo,
|
|
soroush: soroushLogo,
|
|
call: callLogo,
|
|
sms: smsLogo,
|
|
}
|
|
|
|
const props = defineProps<{ messenger: string }>()
|
|
const normalized = computed(() => (props.messenger ?? '').trim().toLowerCase())
|
|
const logoSrc = computed(() => LOGOS[normalized.value])
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
.support-brand-icon {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 50%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.support-brand-icon--eitaa {
|
|
background: #e37600;
|
|
|
|
.support-brand-icon__img {
|
|
filter: brightness(0) invert(1);
|
|
}
|
|
}
|
|
|
|
.support-brand-icon__img,
|
|
.support-brand-icon__svg {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
</style>
|