From a94f447e9ed0e5fb4dfa7efc41f4d877aeda2f61 Mon Sep 17 00:00:00 2001
From: Ephraim Atta-Duncan <ephraimduncan68@gmail.com>
Date: Fri, 30 Jun 2023 23:38:37 +0000
Subject: [PATCH] feat: update stack avatar with changes from code review

---
 .../(dashboard)/avatar/stack-avatar.tsx       | 29 +++++++++++++++++--
 1 file changed, 26 insertions(+), 3 deletions(-)

diff --git a/apps/web/src/components/(dashboard)/avatar/stack-avatar.tsx b/apps/web/src/components/(dashboard)/avatar/stack-avatar.tsx
index 2a263893a..3737e9ccf 100644
--- a/apps/web/src/components/(dashboard)/avatar/stack-avatar.tsx
+++ b/apps/web/src/components/(dashboard)/avatar/stack-avatar.tsx
@@ -9,6 +9,9 @@ export type StackAvatarProps = {
 
 export const StackAvatar = ({ first, zIndex, fallbackText, type }: StackAvatarProps) => {
   let classes = '';
+  let zIndexClass = '';
+  const firstClass = first ? '' : '-ml-3';
+
   switch (type) {
     case 'unsigned':
       classes = 'bg-dawn-200 text-dawn-900';
@@ -23,12 +26,32 @@ export const StackAvatar = ({ first, zIndex, fallbackText, type }: StackAvatarPr
       break;
   }
 
+  switch (zIndex) {
+    case '10':
+      zIndexClass = 'z-10';
+      break;
+    case '20':
+      zIndexClass = 'z-20';
+      break;
+    case '30':
+      zIndexClass = 'z-30';
+      break;
+    case '40':
+      zIndexClass = 'z-40';
+      break;
+    case '50':
+      zIndexClass = 'z-50';
+      break;
+    default:
+      break;
+  }
+
   return (
     <Avatar
       className={`
-        ${zIndex && `z-${zIndex}`} 
-        ${!first && '-ml-3'} 
-        h-10 w-10 border-2 border-solid border-white `}
+        ${zIndexClass}
+        ${firstClass}
+        h-10 w-10 border-2 border-solid border-white`}
     >
       <AvatarFallback className={classes}>{fallbackText ?? 'UK'}</AvatarFallback>
     </Avatar>