Add colored background to contact avatar

Author: fzaninotto

src/components/atomic-crm/companies/CompanyCard.tsx

@@ -63,7 +63,7 @@ const AvatarGroupIterator = () => {
 
   const MAX_AVATARS = 3;
   return (
-    <div className="*:data-[slot=avatar]:ring-background flex -space-x-0.5 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:grayscale">
+    <div className="*:data-[slot=avatar]:ring-background flex -space-x-0.5 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:grayscale-50">
       {data.slice(0, MAX_AVATARS).map((record: any) => (
         <ContactAvatar
           key={record.id}

src/components/ui/avatar.tsx

@@ -32,19 +32,67 @@ function AvatarImage({
   );
 }
 
+/**
+ * Simple hash function to generate a number from a string
+ */
+function hashString(str: string): number {
+  let hash = 0;
+  for (let i = 0; i < str.length; i++) {
+    hash = (hash << 5) - hash + str.charCodeAt(i);
+    hash = hash & hash;
+  }
+  return Math.abs(hash);
+}
+
+const colorClasses = [
+  "bg-[color:var(--avatar-0)]",
+  "bg-[color:var(--avatar-1)]",
+  "bg-[color:var(--avatar-2)]",
+  "bg-[color:var(--avatar-3)]",
+  "bg-[color:var(--avatar-4)]",
+  "bg-[color:var(--avatar-5)]",
+  "bg-[color:var(--avatar-6)]",
+  "bg-[color:var(--avatar-7)]",
+  "bg-[color:var(--avatar-8)]",
+  "bg-[color:var(--avatar-9)]",
+];
+
+function getAvatarColorClass(children: React.ReactNode): string {
+  // Extract text content from children
+  let childText: string | undefined;
+  if (typeof children === "string") {
+    childText = children;
+  } else if (Array.isArray(children)) {
+    // Handle array of children (e.g., multiple text nodes)
+    childText = children.filter((child) => typeof child === "string").join("");
+  } else if (
+    React.isValidElement(children) &&
+    typeof (children.props as any).children === "string"
+  ) {
+    childText = (children.props as any).children;
+  }
+  if (!childText) return "bg-muted text-muted-foreground";
+
+  return colorClasses[hashString(childText) % colorClasses.length];
+}
+
 function AvatarFallback({
   className,
+  children,
   ...props
 }: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
   return (
     <AvatarPrimitive.Fallback
       data-slot="avatar-fallback"
       className={cn(
-        "bg-muted flex size-full items-center justify-center rounded-full",
+        "flex size-full items-center justify-center rounded-full",
         className,
+        getAvatarColorClass(children),
       )}
       {...props}
-    />
+    >
+      {children}
+    </AvatarPrimitive.Fallback>
   );
 }
 

src/index.css

@@ -74,6 +74,16 @@
   --sidebar-accent-foreground: oklch(0.205 0 0);
   --sidebar-border: oklch(0.922 0 0);
   --sidebar-ring: oklch(0.708 0 0);
+  --avatar-0: oklch(0.85 0.08 240);
+  --avatar-1: oklch(0.88 0.1 340);
+  --avatar-2: oklch(0.85 0.07 180);
+  --avatar-3: oklch(0.9 0.09 40);
+  --avatar-4: oklch(0.87 0.08 300);
+  --avatar-5: oklch(0.85 0.08 150);
+  --avatar-6: oklch(0.87 0.08 200);
+  --avatar-7: oklch(0.88 0.09 10);
+  --avatar-8: oklch(0.92 0.08 80);
+  --avatar-9: oklch(0.86 0.09 270);
 }
 
 .dark {
@@ -108,6 +118,16 @@
   --sidebar-accent-foreground: oklch(0.985 0 0);
   --sidebar-border: oklch(1 0 0 / 10%);
   --sidebar-ring: oklch(0.556 0 0);
+  --avatar-0: oklch(0.35 0.12 240);
+  --avatar-1: oklch(0.38 0.14 340);
+  --avatar-2: oklch(0.35 0.11 180);
+  --avatar-3: oklch(0.38 0.13 40);
+  --avatar-4: oklch(0.36 0.12 300);
+  --avatar-5: oklch(0.35 0.11 150);
+  --avatar-6: oklch(0.37 0.12 200);
+  --avatar-7: oklch(0.38 0.14 10);
+  --avatar-8: oklch(0.4 0.11 80);
+  --avatar-9: oklch(0.36 0.13 270);
 }
 
 a,