gobha
c687002015
Co-authored-by: gobha <jasafpro@gmail.com> Co-committed-by: gobha <jasafpro@gmail.com>
39 lines
1.1 KiB
JavaScript
39 lines
1.1 KiB
JavaScript
/**
|
|
* Avatar primitive — circle avatar with letter fallback
|
|
* Sizes: sm (24px), md (32px), lg (48px)
|
|
*/
|
|
const { html } = window;
|
|
const { useState } = hooks;
|
|
|
|
function initials(name) {
|
|
if (!name) return '?';
|
|
const parts = name.trim().split(/\s+/);
|
|
if (parts.length > 1) {
|
|
// Multi-word: first + last initials ("John Doe" → "JD")
|
|
return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
|
|
}
|
|
// Single word: first letter only ("admin" → "A")
|
|
return name[0].toUpperCase();
|
|
}
|
|
|
|
export function Avatar({ src, name = '', size = 'md' }) {
|
|
const [failed, setFailed] = useState(false);
|
|
|
|
if (src && !failed) {
|
|
return html`
|
|
<img
|
|
class="sw-avatar sw-avatar--${size}"
|
|
src=${src}
|
|
alt=${name}
|
|
onError=${() => setFailed(true)}
|
|
/>
|
|
`;
|
|
}
|
|
return html`
|
|
<span class="sw-avatar sw-avatar--${size} sw-avatar--fallback"
|
|
aria-label=${name || 'Avatar'}>
|
|
${initials(name)}
|
|
</span>
|
|
`;
|
|
}
|