Avatar

import {Avatar, AvatarFallback, AvatarImage} from '@stroeer-labs/design-library/react';

export function AvatarDemo() {
    return (
        <div className="space-y-6">
            <div className="space-y-2">
                <p className="text-xs font-medium text-muted-foreground">Image &amp; fallback</p>
                <div className="flex flex-wrap items-center gap-3">
                    <Avatar>
                        <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
                        <AvatarFallback>CN</AvatarFallback>
                    </Avatar>
                    {/* No (loadable) image → the fallback initials show */}
                    <Avatar>
                        <AvatarImage src="" alt="" />
                        <AvatarFallback>AT</AvatarFallback>
                    </Avatar>
                    <Avatar className="rounded-lg">
                        <AvatarImage src="https://github.com/vercel.png" alt="@vercel" />
                        <AvatarFallback>V</AvatarFallback>
                    </Avatar>
                </div>
            </div>

            <div className="space-y-2">
                <p className="text-xs font-medium text-muted-foreground">Sizes</p>
                <div className="flex flex-wrap items-center gap-3">
                    <Avatar size="sm">
                        <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
                        <AvatarFallback>CN</AvatarFallback>
                    </Avatar>
                    <Avatar size="default">
                        <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
                        <AvatarFallback>CN</AvatarFallback>
                    </Avatar>
                    <Avatar size="lg">
                        <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
                        <AvatarFallback>CN</AvatarFallback>
                    </Avatar>
                </div>
            </div>
        </div>
    );
}

import {Component} from '@angular/core';
import {HlmAvatarImports} from '@stroeer-labs/design-library/angular';

@Component({
    selector: 'dl-avatar-demo',
    standalone: true,
    imports: [HlmAvatarImports],
    template: `
    <div class="space-y-6">
      <div class="space-y-2">
        <p class="text-xs font-medium text-muted-foreground">Image & fallback</p>
        <div class="flex flex-wrap items-center gap-3">
          <hlm-avatar>
            <img hlmAvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
            <span hlmAvatarFallback>CN</span>
          </hlm-avatar>
          <!-- No (loadable) image → the fallback initials show -->
          <hlm-avatar>
            <img hlmAvatarImage src="" alt="" />
            <span hlmAvatarFallback>AT</span>
          </hlm-avatar>
          <hlm-avatar class="rounded-lg">
            <img hlmAvatarImage src="https://github.com/vercel.png" alt="@vercel" />
            <span hlmAvatarFallback>V</span>
          </hlm-avatar>
        </div>
      </div>

      <div class="space-y-2">
        <p class="text-xs font-medium text-muted-foreground">Sizes</p>
        <div class="flex flex-wrap items-center gap-3">
          <hlm-avatar size="sm">
            <img hlmAvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
            <span hlmAvatarFallback>CN</span>
          </hlm-avatar>
          <hlm-avatar size="default">
            <img hlmAvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
            <span hlmAvatarFallback>CN</span>
          </hlm-avatar>
          <hlm-avatar size="lg">
            <img hlmAvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
            <span hlmAvatarFallback>CN</span>
          </hlm-avatar>
        </div>
      </div>
    </div>
  `,
})
export class AvatarDemoComponent {}