big update: added reactions, groups, media share

web/src/components/Avatar.tsx

@@ -1,4 +1,5 @@
 import { avatarColor, initials } from '../lib/format'
+import { IconUsers } from './icons'
 
 type AvatarSize = 'sm' | 'md' | 'lg' | 'xl'
 
@@ -38,3 +39,26 @@ export default function Avatar({ name, seed, size = 'md', online = false, classN
     </span>
   )
 }
+
+interface GroupAvatarProps {
+  name: string
+  seed: number | string
+  size?: AvatarSize
+  className?: string
+}
+
+export function GroupAvatar({ name, seed, size = 'md', className = '' }: GroupAvatarProps) {
+  const background = avatarColor(seed)
+  return (
+    <span className={`relative inline-flex shrink-0 ${className}`}>
+      <span
+        className={`inline-flex items-center justify-center rounded-full text-white/95 shadow-inner ring-1 ring-white/10 ${SIZE_CLASSES[size]}`}
+        style={{ backgroundImage: `linear-gradient(145deg, ${background}, color-mix(in srgb, ${background} 62%, #000))` }}
+        aria-hidden="true"
+        title={name}
+      >
+        <IconUsers className="h-[55%] w-[55%]" />
+      </span>
+    </span>
+  )
+}