feat: Avatar component

Author: daBack

packages/storybook/src/stories/avatar.stories.tsx

@@ -0,0 +1,19 @@
+import { ScoutAvatar } from "@scouterna/ui-react";
+import preview from "#.storybook/preview";
+
+const meta = preview.meta({
+  title: "Basics/Avatar",
+  component: ScoutAvatar,
+  parameters: {
+    layout: "centered",
+  },
+});
+
+export default meta;
+
+export const BasicExample = meta.story({
+  args: {},
+  render: (args) => (
+    <ScoutAvatar {...args} />
+  ),
+});

packages/ui-webc/src/components/avatar/assets/fallbackImage.png

@@ -0,0 +1,3 @@
+:host {
+  
+}

packages/ui-webc/src/components/avatar/avatar.css

@@ -0,0 +1,33 @@
+import { Component, type ComponentInterface, h, Prop } from "@stencil/core";
+import { getAssetPath } from '@stencil/core';
+
+@Component({
+  tag: "scout-avatar",
+  styleUrl: "avatar.css",
+  shadow: {
+    delegatesFocus: true,
+  },
+  assetsDirs: ['assets'],
+})
+export class ScoutAvatar implements ComponentInterface {
+
+  /**
+   * The source URL of the user image.
+   */
+  @Prop() imageSrc = '';
+
+  /**
+   * The name of the user.
+   */
+  @Prop() alt = '';
+
+  render() {
+
+    const fallback = getAssetPath('fallbackImage.png');
+    console.log('Fallback asset path:', fallback);
+
+    return (
+      <img src={getAssetPath('./assets/fallbackImage.png')} alt={this.alt} />
+    );
+  }
+}

packages/ui-webc/src/components/avatar/avatar.tsx

@@ -0,0 +1,16 @@
+# scout-avatar
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property   | Attribute   | Description                       | Type     | Default |
+| ---------- | ----------- | --------------------------------- | -------- | ------- |
+| `alt`      | `alt`       | The name of the user.             | `string` | `''`    |
+| `imageSrc` | `image-src` | The source URL of the user image. | `string` | `''`    |
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*