feat: add Avatar component and integrate into index page

2026-06-16 08:30:29 +02:00
parent b61720fd24
commit 7c65e70c8f
4 changed files with 60 additions and 7 deletions
@@ -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>