You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
45 lines
1.4 KiB
Svelte
45 lines
1.4 KiB
Svelte
<script>export let initials = "AB";
|
|
export let fill = "fill-token";
|
|
export let src = "";
|
|
export let fallback = "";
|
|
export let action = () => {
|
|
};
|
|
export let actionParams = "";
|
|
export let background = "bg-surface-400-500-token";
|
|
export let width = "w-16";
|
|
export let border = "";
|
|
export let rounded = "rounded-full";
|
|
export let shadow = "";
|
|
export let cursor = "";
|
|
let cBase = "flex aspect-square text-surface-50 font-semibold justify-center items-center overflow-hidden isolate";
|
|
let cImage = "w-full h-full object-cover";
|
|
$:
|
|
classesBase = `${cBase} ${background} ${width} ${border} ${rounded} ${shadow} ${cursor} ${$$props.class ?? ""}`;
|
|
function prunedRestProps() {
|
|
delete $$restProps.class;
|
|
return $$restProps;
|
|
}
|
|
</script>
|
|
|
|
<!-- FIXME: resolve a11y warnings -->
|
|
<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
|
|
<figure class="avatar {classesBase}" data-testid="avatar" on:click on:keydown on:keyup on:keypress>
|
|
{#if src}
|
|
<img
|
|
class="avatar-image {cImage}"
|
|
style={$$props.style ?? ''}
|
|
{src}
|
|
alt={$$props.alt || ''}
|
|
use:action={actionParams}
|
|
on:error={() => (src = fallback)}
|
|
{...prunedRestProps()}
|
|
/>
|
|
{:else}
|
|
<svg class="avatar-initials w-full h-full" viewBox="0 0 512 512">
|
|
<text x="50%" y="50%" dominant-baseline="central" text-anchor="middle" font-weight="bold" font-size={150} class="avatar-text {fill}">
|
|
{String(initials).substring(0, 2).toUpperCase()}
|
|
</text>
|
|
</svg>
|
|
{/if}
|
|
</figure>
|