31 lines
778 B
Plaintext
31 lines
778 B
Plaintext
|
---
|
||
|
|
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>
|