34 lines
701 B
Vue
34 lines
701 B
Vue
<template>
|
|
<div
|
|
:style="{ backgroundColor: stringToColour(props.name) } "
|
|
class="fit flex items-center justify-center text-white"
|
|
>
|
|
{{ props.name ? props.name.substring(0, 1) : '' }}
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
|
|
const props = defineProps<{
|
|
name: string
|
|
}>()
|
|
|
|
const stringToColour = (str: string) => {
|
|
if (!str) return '#eee'
|
|
let hash = 0
|
|
str.split('').forEach(char => {
|
|
hash = char.charCodeAt(0) + ((hash << 5) - hash)
|
|
})
|
|
let colour = '#'
|
|
for (let i = 0; i < 3; i++) {
|
|
const value = (hash >> (i * 8)) & 0xff
|
|
colour += value.toString(16).padStart(2, '0')
|
|
}
|
|
return colour
|
|
}
|
|
|
|
</script>
|
|
|
|
<style>
|
|
</style>
|