feat: add Avatar component and integrate into index page

src/components/Avatar/_avatar.scss

@@ -0,0 +1,21 @@
+@use '../../styles/tokens/typography' as *;
+
+.avatar {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  overflow: hidden;
+  width: 40px;
+  height: 40px;
+  &__content {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    @include text-base;
+    color: var(--nds-color-on-primary);
+    background-color: var(--nds-disabled);
+  }
+}

src/components/Avatar/avatar.astro

@@ -0,0 +1,31 @@
+---
+import { ProfileIcon } from '../Icons';
+export interface Props {
+  type:        'photo' | 'initials';
+  name: string;
+  image?: string;
+}
+const { type, name, image } = Astro.props;
+---
+
+<div class={`avatar`}>
+  {type === 'photo' && image ? (
+    <div class="avatar__content avatar__content--photo">
+      <img
+        src={image}
+        alt={name}
+        class="avatar__content"
+        onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';"
+      />
+      <span class="avatar__fallback" style="display:none;">
+        <ProfileIcon size={24}/>
+      </span>
+    </div>
+  ) : (
+    <span class="avatar__content">{name.split(' ').map(word => word[0]).join('').toUpperCase()}</span>
+  )}
+</div>
+
+<style lang="scss">
+@use './_avatar.scss';
+</style>

src/components/index.ts

@@ -12,4 +12,5 @@ export { default as ListItem }     from './ListItem/listItem.astro';
 export { default as ListItemTitle } from './ListItem/listItemTitle.astro';
 export { default as ListItemSubtitle } from './ListItem/listItemSubtitle.astro';
 export { default as LoadingBar }    from './LoadingBar/loadingBar.astro';
-export { default as NumericStepper } from './numericStepper/numericStepper.astro';
+export { default as NumericStepper } from './numericStepper/numericStepper.astro';
+export { default as Avatar } from './Avatar/avatar.astro';

src/pages/index.astro

@@ -12,6 +12,7 @@ import ListItemTitle from '../components/ListItem/listItemTitle.astro';
 import ListItemSubtitle from '../components/ListItem/listItemSubtitle.astro';
 import LoadingBar from '../components/LoadingBar/loadingBar.astro';
 import NumericStepper from '../components/numericStepper/numericStepper.astro';
+import Avatar from '../components/Avatar/avatar.astro';
 import {
   Arrow2Icon, BinIcon, BurgerIcon, CalendarIcon, CheckIcon, CloseIcon,
   CodeIcon, CubeIcon, DownloadIcon, FilterIcon, HelpIcon, HomeIcon,
@@ -27,17 +28,16 @@ const initialChecked = true;
   <main>
     <h1>Nova Design System</h1>
     <section>
-      <h2>Numeric Stepper</h2>
+      <h2>Avatar</h2>
       <div style="display: flex; flex-direction: column; gap: var(--nds-spacing-md);">
-        <NumericStepper min={-15} max={10} value={5} step={5} id="my-numeric-stepper"/>
+        <Avatar image="https://static.vecteezy.com/system/resources/thumbnails/057/068/323/small/single-fresh-red-strawberry-on-table-green-background-food-fruit-sweet-macro-juicy-plant-image-photo.jpg" name="John Doe" type="photo"/>
+        <Avatar name="Jane Smith" type="initials"/>
       </div>
     </section>
     <section>
-      <h2>Loading Bar</h2>
+      <h2>Numeric Stepper</h2>
       <div style="display: flex; flex-direction: column; gap: var(--nds-spacing-md);">
-        <LoadingBar type="known" percentage={75} width="500px" />
-        <LoadingBar type="unknown" width="500px" />
-      </div>
+        <NumericStepper min={-15} max={10} value={5} step={5} id="my-numeric-stepper"/>
       </div>
     </section>
     <section>