From bbf96a2e1d348e9a69915e70c2513aa96f65ea6b Mon Sep 17 00:00:00 2001
From: Bill Gale <bill@gale.dev>
Date: Wed, 8 Dec 2021 11:40:48 +0000
Subject: [PATCH] fix: team avatar booking option 2 (#1274)

---
 components/ui/AvatarGroup.tsx | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/components/ui/AvatarGroup.tsx b/components/ui/AvatarGroup.tsx
index b5f4e1dc29..958d116f72 100644
--- a/components/ui/AvatarGroup.tsx
+++ b/components/ui/AvatarGroup.tsx
@@ -28,11 +28,15 @@ export const AvatarGroup = function AvatarGroup(props: AvatarGroupProps) {
 
   return (
     <ul className={classNames("flex -space-x-2 overflow-hidden", props.className)}>
-      {props.items.slice(0, props.truncateAfter).map((item, idx) => (
-        <li key={idx} className="inline-block">
-          <Avatar imageSrc={item.image} title={item.title} alt={item.alt || ""} size={props.size} />
-        </li>
-      ))}
+      {props.items.slice(0, props.truncateAfter).map((item, idx) => {
+        if (item.image != null) {
+          return (
+            <li key={idx} className="inline-block">
+              <Avatar imageSrc={item.image} title={item.title} alt={item.alt || ""} size={props.size} />
+            </li>
+          );
+        }
+      })}
       {/*props.items.length > props.truncateAfter && (
         <li className="relative inline-block">
           <Tooltip.Tooltip delayDuration="300">