coder
diff --git a/‎site/src/components/Avatar/Avatar.stories.tsx
Lines changed: 47 additions & 39 deletions b/‎site/src/components/Avatar/Avatar.stories.tsx
Lines changed: 47 additions & 39 deletions
diff --git a/‎site/src/components/Avatar/Avatar.tsx
Lines changed: 8 additions & 2 deletions b/‎site/src/components/Avatar/Avatar.tsx
Lines changed: 8 additions & 2 deletions
diff --git a/‎site/src/components/Avatar/firstLetter.test.ts
Lines changed: 0 additions & 11 deletions b/‎site/src/components/Avatar/firstLetter.test.ts
Lines changed: 0 additions & 11 deletions
diff --git a/‎site/src/components/Avatar/firstLetter.ts
Lines changed: 0 additions & 10 deletions b/‎site/src/components/Avatar/firstLetter.ts
Lines changed: 0 additions & 10 deletions
@@ -1,63 +1,71 @@
-import { Story } from "@storybook/react";
-import { Avatar, AvatarIcon, AvatarProps } from "./Avatar";
+import type { Meta, StoryObj } from "@storybook/react";
+import { Avatar, AvatarIcon } from "./Avatar";
 import PauseIcon from "@mui/icons-material/PauseOutlined";
 
-export default {
+const meta: Meta<typeof Avatar> = {
   title: "components/Avatar",
   component: Avatar,
 };
 
-const Template: Story<AvatarProps> = (args: AvatarProps) => (
-  <Avatar {...args} />
-);
+export default meta;
+type Story = StoryObj<typeof Avatar>;
 
-export const Letter = Template.bind({});
-Letter.args = {
-  children: "Coder",
+export const Letter: Story = {
+  args: {
+    children: "Coder",
+  },
 };
 
-export const LetterXL = Template.bind({});
-LetterXL.args = {
-  children: "Coder",
-  size: "xl",
+export const LetterXL = {
+  args: {
+    children: "Coder",
+    size: "xl",
+  },
 };
 
-export const LetterDarken = Template.bind({});
-LetterDarken.args = {
-  children: "Coder",
-  colorScheme: "darken",
+export const LetterDarken = {
+  args: {
+    children: "Coder",
+    colorScheme: "darken",
+  },
 };
 
-export const Image = Template.bind({});
-Image.args = {
-  src: "https://avatars.githubusercontent.com/u/95932066?s=200&v=4",
+export const Image = {
+  args: {
+    src: "https://avatars.githubusercontent.com/u/95932066?s=200&v=4",
+  },
 };
 
-export const ImageXL = Template.bind({});
-ImageXL.args = {
-  src: "https://avatars.githubusercontent.com/u/95932066?s=200&v=4",
-  size: "xl",
+export const ImageXL = {
+  args: {
+    src: "https://avatars.githubusercontent.com/u/95932066?s=200&v=4",
+    size: "xl",
+  },
 };
 
-export const MuiIcon = Template.bind({});
-MuiIcon.args = {
-  children: <PauseIcon />,
+export const MuiIcon = {
+  args: {
+    children: <PauseIcon />,
+  },
 };
 
-export const MuiIconDarken = Template.bind({});
-MuiIconDarken.args = {
-  children: <PauseIcon />,
-  colorScheme: "darken",
+export const MuiIconDarken = {
+  args: {
+    children: <PauseIcon />,
+    colorScheme: "darken",
+  },
 };
 
-export const MuiIconXL = Template.bind({});
-MuiIconXL.args = {
-  children: <PauseIcon />,
-  size: "xl",
+export const MuiIconXL = {
+  args: {
+    children: <PauseIcon />,
+    size: "xl",
+  },
 };
 
-export const AvatarIconDarken = Template.bind({});
-AvatarIconDarken.args = {
-  children: <AvatarIcon src="/icon/database.svg" />,
-  colorScheme: "darken",
+export const AvatarIconDarken = {
+  args: {
+    children: <AvatarIcon src="/icon/database.svg" />,
+    colorScheme: "darken",
+  },
 };
@@ -4,7 +4,6 @@ import MuiAvatar, { AvatarProps as MuiAvatarProps } from "@mui/material/Avatar";
 import { makeStyles } from "@mui/styles";
 import { FC } from "react";
 import { combineClasses } from "utils/combineClasses";
-import { firstLetter } from "./firstLetter";
 
 export type AvatarProps = MuiAvatarProps & {
   size?: "sm" | "md" | "xl";
@@ -32,7 +31,6 @@ export const Avatar: FC<AvatarProps> = ({
         fitImage && styles.fitImage,
       ])}
     >
-      {/* If the children is a string, we always want to render the first letter */}
       {typeof children === "string" ? firstLetter(children) : children}
     </MuiAvatar>
   );
@@ -46,6 +44,14 @@ export const AvatarIcon: FC<{ src: string }> = ({ src }) => {
   return <img src={src} alt="" className={styles.avatarIcon} />;
 };
 
+const firstLetter = (str: string): string => {
+  if (str.length > 0) {
+    return str[0].toLocaleUpperCase();
+  }
+
+  return "";
+};
+
 const useStyles = makeStyles((theme) => ({
   // Size styles
   sm: {