feat(avatar): add status indicator support in avatar

innovaccer · Nov 28, 2024 · 9d072e5 · 9d072e5
1 parent a99d8cd
commit 9d072e5
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 0 deletions.
diff --git a/core/components/atoms/avatar/Avatar.tsx b/core/components/atoms/avatar/Avatar.tsx
@@ -141,6 +141,11 @@ export const Avatar = (props: AvatarProps) => {
     ['Avatar-presence--away']: presence === 'away',
   });
 
+  const statusHintClassName = classNames({
+    ['Avatar-statusHint']: true,
+    ['d-none']: shape !== 'round' || size !== 'regular',
+  });
+
   const sharedProp = {
     size,
     firstName,
@@ -204,6 +209,9 @@ export const Avatar = (props: AvatarProps) => {
         renderAvatar()
       )}
       {presence && <span className={presenceClassNames} />}
+      <span className={statusHintClassName}>
+        <Icon name="done" size={12} appearance="white" type="rounded" />
+      </span>
     </span>
   );
 

diff --git a/css/src/components/avatar.css b/css/src/components/avatar.css
@@ -124,3 +124,17 @@
 .Avatar-presence--away {
   background: var(--secondary-dark);
 }
+
+.Avatar-statusHint {
+  top: -2px;
+  right: -2px;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  box-shadow: 0 0 0 2px red;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: green;
+  position: absolute;
+}