Avatar & AvatarGroup

<span class="mjl-avatar mjl-avatar--lg mjl-avatar--circle" role="img" aria-label="Siti Nurhaliza">
  <img class="mjl-avatar__image" src="/foto/siti.jpg" alt="">
</span>

<div class="mjl-avatar-group" role="group" aria-label="2 petugas">
  <span class="mjl-avatar mjl-avatar--sm mjl-avatar--circle" role="img" aria-label="Asep Saepudin">
    <span class="mjl-avatar__fallback" aria-hidden="true">AS</span>
  </span>
  <span class="mjl-avatar mjl-avatar--sm mjl-avatar--circle" role="img" aria-label="Dewi Lestari">
    <span class="mjl-avatar__fallback" aria-hidden="true">DL</span>
  </span>
</div>

<script setup lang="ts">
import { MjlAvatar, MjlAvatarGroup } from '@majalengka/vue';
</script>

<template>
  <MjlAvatar name="Siti Nurhaliza" src="/foto/siti.jpg" size="lg" />

  <MjlAvatarGroup label="2 petugas menangani berkas ini">
    <MjlAvatar name="Asep Saepudin" size="sm" />
    <MjlAvatar name="Dewi Lestari" size="sm" />
  </MjlAvatarGroup>
</template>

import { useState } from 'react';

const inisial = (nama: string) => nama.trim().split(/\s+/).slice(0, 2).map((k) => k[0]).join('');

export function MjlAvatar({ name, src, size = 'md' }: { name: string; src?: string; size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' }) {
  const [gagal, setGagal] = useState(false);
  return (
    <span className={`mjl-avatar mjl-avatar--${size} mjl-avatar--circle`} role="img" aria-label={name}>
      {src && !gagal
        ? <img className="mjl-avatar__image" src={src} alt="" onError={() => setGagal(true)} />
        : <span className="mjl-avatar__fallback" aria-hidden="true">{inisial(name)}</span>}
    </span>
  );
}

// Pemakaian: <MjlAvatar name="Siti Nurhaliza" src="/foto/siti.jpg" size="lg" />

import { Component, computed, input, signal } from '@angular/core';

@Component({
  selector: 'mjl-avatar',
  standalone: true,
  template: `
    <span class="mjl-avatar mjl-avatar--{{ size() }} mjl-avatar--circle" role="img" [attr.aria-label]="name()">
      @if (src() && !failed()) {
        <img class="mjl-avatar__image" [src]="src()" alt="" (error)="failed.set(true)" />
      } @else {
        <span class="mjl-avatar__fallback" aria-hidden="true">{{ initials() }}</span>
      }
    </span>
  `,
})
export class MjlAvatar {
  name = input.required<string>();
  src = input<string>();
  size = input<'xs' | 'sm' | 'md' | 'lg' | 'xl'>('md');
  failed = signal(false);
  initials = computed(() => this.name().trim().split(/\s+/).slice(0, 2).map((k) => k[0]).join(''));
}

{{-- resources/views/components/mjl/avatar.blade.php --}}
@props(['name', 'src' => null, 'size' => 'md'])
<span {{ $attributes->class("mjl-avatar mjl-avatar--{$size} mjl-avatar--circle") }} role="img" aria-label="{{ $name }}">
  @if ($src)
    <img class="mjl-avatar__image" src="{{ $src }}" alt="">
  @else
    <span class="mjl-avatar__fallback" aria-hidden="true">
      {{ collect(explode(' ', $name))->take(2)->map(fn ($k) => mb_substr($k, 0, 1))->implode('') }}
    </span>
  @endif
</span>

{{-- Pemakaian --}}
<x-mjl.avatar :name="$petugas->nama" :src="$petugas->foto_url" size="lg" />

<?php
$nama = 'Siti Nurhaliza';
$inisial = implode('', array_map(fn ($k) => mb_substr($k, 0, 1), array_slice(explode(' ', $nama), 0, 2)));
?>
<span class="mjl-avatar mjl-avatar--md mjl-avatar--circle" role="img" aria-label="<?= htmlspecialchars($nama, ENT_QUOTES, 'UTF-8') ?>">
  <span class="mjl-avatar__fallback" aria-hidden="true"><?= htmlspecialchars($inisial, ENT_QUOTES, 'UTF-8') ?></span>
</span>