v4

src/components/pnAutoAvatar.vue

@@ -0,0 +1,32 @@
+<template>
+  <div
+    :style="{ backgroundColor: stringToColour(props.name) } "
+    class="fit flex items-center justify-center text-white"
+    > 
+    {{ props.name.substring(0, 1) }}
+  </div>
+</template>
+
+<script setup lang="ts">
+
+  const props = defineProps<{
+    name: string
+  }>()
+
+  const stringToColour = (str: string) => {
+    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>