creating avatar component

packages/docs/src/stories/Avatar.stories.tsx

@@ -0,0 +1,20 @@
+import { StoryObj, Meta } from '@storybook/react';
+import { Avatar, AvatarProps } from '@ignite-ui/react';
+
+export default {
+  title: 'Data display/Avatar',
+  component: Avatar,
+} as Meta<AvatarProps>;
+
+export const Primary: StoryObj<AvatarProps> = {
+  args: {
+    src: 'https://github.com/brenocastelo.png',
+    alt: 'Breno Castelo Branco',
+  },
+};
+
+export const WithFallback: StoryObj<AvatarProps> = {
+  args: {
+    src: undefined,
+  },
+};

packages/react/src/components/Avatar/index.tsx

@@ -0,0 +1,17 @@
+import { User } from 'phosphor-react';
+import { ComponentProps } from 'react';
+import { AvatarContainer, AvatarFallback, AvatarImage } from './styles';
+
+export function Avatar(props: AvatarProps) {
+  return (
+    <AvatarContainer>
+      <AvatarImage {...props} />
+
+      <AvatarFallback delayMs={600}>
+        <User />
+      </AvatarFallback>
+    </AvatarContainer>
+  );
+}
+
+export interface AvatarProps extends ComponentProps<typeof AvatarImage> {}

packages/react/src/components/Avatar/styles.ts

@@ -0,0 +1,33 @@
+import * as Avatar from '@radix-ui/react-avatar';
+
+import { styled } from '../../styles';
+
+export const AvatarContainer = styled(Avatar.Root, {
+  borderRadius: '$full',
+  display: 'inline-block',
+  height: '$12',
+  width: '$12',
+  overflow: 'hidden',
+});
+
+export const AvatarImage = styled(Avatar.Image, {
+  width: '100%',
+  heigh: '100%',
+  objectFit: 'cover',
+  borderRadius: 'inherit',
+});
+
+export const AvatarFallback = styled(Avatar.Fallback, {
+  width: '100%',
+  height: '100%',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  backgroundColor: '$gray800',
+  color: '$gray600',
+
+  svg: {
+    height: '$6',
+    width: '$6',
+  },
+});