Add avatar image and text changes

ClickHouse · Oct 17, 2023 · 96a7b00 · 96a7b00
1 parent eb264a2
commit 96a7b00
Show file tree

Hide file tree

Showing 3 changed files with 200 additions and 7 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/components/Avatar/Avatar.stories.tsx b/src/components/Avatar/Avatar.stories.tsx
@@ -3,11 +3,11 @@ import { Avatar } from "./Avatar";
 export default {
   component: Avatar,
   title: "Display/Avatar",
-  tags: ["avatar","autodocs"],
+  tags: ["avatar", "autodocs"],
 };
 
 export const Playground = {
   args: {
     text: "CM",
   },
-};
+};
diff --git a/src/components/Avatar/Avatar.tsx b/src/components/Avatar/Avatar.tsx
@@ -1,16 +1,33 @@
-import { Fallback, Root } from "@radix-ui/react-avatar";
+import { Fallback, Image, Root } from "@radix-ui/react-avatar";
+import { HTMLAttributes } from "react";
 import styled from "styled-components";
 
 type TextSize = "md" | "sm";
 
-export type AvatarProps = {
+export interface AvatarProps extends HTMLAttributes<HTMLDivElement> {
   text: string;
   textSize?: TextSize;
-};
+  src?: string;
+  srcSet?: string;
+}
 
-const Avatar = ({ text = "", textSize = "sm", ...delegated }: AvatarProps) => (
+const Avatar = ({ text, textSize = "sm", src, srcSet, ...delegated }: AvatarProps) => (
   <StyledRoot {...delegated}>
-    <StyledFallback $textSize={textSize}>{text}</StyledFallback>
+    <AvatarImage
+      src={src}
+      srcSet={srcSet}
+      alt={text}
+    />
+    <StyledFallback
+      $textSize={textSize}
+      delayMs={0}
+    >
+      {text
+        .trim()
+        .replace(/(^.)([^ ]* )?(.).*/, "$1$3")
+        .trim()
+        .toUpperCase()}
+    </StyledFallback>
   </StyledRoot>
 );
 
@@ -39,6 +56,13 @@ const StyledRoot = styled(Root)`
   }
 `;
 
+const AvatarImage = styled(Image)`
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: inherit;
+`;
+
 const StyledFallback = styled(Fallback)<{ $textSize: TextSize }>`
   width: ${props => props.theme.click.avatar.size.label.width};
   display: inline-flex;