52 lines
1.3 KiB
Svelte
52 lines
1.3 KiB
Svelte
<script lang="ts">
|
|
import { page } from '$app/stores';
|
|
import { getUserAvatar } from '$lib/config';
|
|
import { editorStore } from '$lib/stores/editor';
|
|
|
|
export let loadTime: number | undefined = undefined;
|
|
export let uniqueId: string | undefined = undefined;
|
|
export let align: BioSiteAlign = 'LEFT';
|
|
export let small: boolean = false;
|
|
export let tiny: boolean = false;
|
|
export let veryTiny: boolean = false;
|
|
|
|
$: noAvatar =
|
|
($page.data.bio?.hasAvatar !== true && $editorStore.avatar == null) ||
|
|
$editorStore.edits.edits.deleteAvatar != null;
|
|
|
|
$: isEditor = $page.url.pathname.startsWith('/dashboard');
|
|
$: avatar = noAvatar
|
|
? undefined
|
|
: $editorStore.avatar
|
|
? $editorStore.avatar
|
|
: uniqueId
|
|
? getUserAvatar(uniqueId, isEditor ? loadTime : undefined)
|
|
: undefined;
|
|
</script>
|
|
|
|
<div
|
|
class="w-24 h-24 rounded-3xl avatar bg-center bg-cover"
|
|
class:self-center={align === 'CENTER'}
|
|
class:self-end={align === 'RIGHT'}
|
|
class:small
|
|
class:tiny
|
|
class:very-tiny={veryTiny}
|
|
style="--avatar: url({avatar ?? '/assets/default/avatar.svg'})" />
|
|
|
|
<style lang="postcss">
|
|
div.avatar {
|
|
background-image: var(--avatar);
|
|
}
|
|
|
|
div.small {
|
|
@apply w-16 h-16 rounded-2xl;
|
|
}
|
|
|
|
div.tiny {
|
|
@apply w-9 h-9 rounded-full;
|
|
}
|
|
|
|
div.very-tiny {
|
|
@apply w-6 h-6 rounded-full;
|
|
}
|
|
</style>
|