init

components/Avatar.js

@@ -0,0 +1,36 @@
+class Avatar extends Shadow {
+    constructor(person, size) {
+        super()
+        this.person = person
+        this.size = size
+    }
+
+    render() {
+        const { person, size } = this
+        if (person.image_path) {
+            img(`${config.SERVER}${person.image_path}`, `${size}em`, `${size}em`)
+                .borderRadius(50, pct)
+                .objectFit("cover")
+                .flexShrink(0)
+        } else {
+            const initials = [person.first_name?.[0], person.last_name?.[0]].filter(Boolean).join("").toUpperCase()
+            VStack(() => {
+                p(initials)
+                    .margin(0).fontSize(size * 0.35, em).fontWeight("700")
+                    .color("white").lineHeight("1")
+            })
+            .width(size, em).height(size, em).borderRadius(50, pct)
+            .background(this.avatarColor(`${person.first_name} ${person.last_name}`))
+            .justifyContent("center").alignItems("center").flexShrink(0)
+        }
+    }
+
+    avatarColor(name) {
+        const colors = ["#3b82f6", "#ef4444", "#10b981", "#f59e0b", "#8b5cf6", "#ec4899", "#06b6d4", "#84cc16"]
+        let hash = 0
+        for (let i = 0; i < (name || "").length; i++) hash = name.charCodeAt(i) + ((hash << 5) - hash)
+        return colors[Math.abs(hash) % colors.length]
+    }
+}
+
+register(Avatar)