<template>
    <div class="flex justify-center items-center rounded-full bg-gray-900 hover:bg-primary-800">
        <img v-if="avatar" :src="avatar" alt="alt" class="rounded-full" v-bind:class="'avatar' + size">
        <span v-else class="text-2xl font-bold text-gray-100 hover:text-white"  v-bind:class="'text-' + size">{{ alt[0] }}</span>
    </div>

</template>

<script>
export default {
    name: 'Avatar',
    props: ['avatar', 'alt', 'size']
}
</script>
