<template>
<span :style="{ color: color }">{{ user.name }}</span>
</template>

<script setup>
import { computed } from 'vue'
import Colors from '../../common/colors'

const props = defineProps(['user'])
const user = props.user

const color = computed(() => { return user.color ?? Colors.Secondary })
</script>

<style scoped>
span:hover {
  color: white !important;
}
</style>
