notkaramel/ECSESS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Phase out Skeleton UI in Council Avatar

Browse Source
This commit is contained in:
Antoine Phan
2026-01-08 20:58:45 -05:00
parent dc722963a9
commit 7f0feec364
1 changed files with 17 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/components/council/CouncilAvatar.svelte
View File

@@ -1,6 +1,4 @@
<script lang="ts"> <script lang="ts">
// Reference: https://github.com/skeletonlabs/skeleton/tree/88844ffb67b7c9553c5245dd6d70146a3d6b8932/packages/skeleton-svelte/src/components/avatar
import { Avatar } from '@skeletonlabs/skeleton-svelte';
let { name, src }: { name: string; src: string } = $props(); let { name, src }: { name: string; src: string } = $props();
function getInitials(name: string): string { function getInitials(name: string): string {
@@ -10,14 +8,25 @@
.map((word) => word.charAt(0).toUpperCase()) .map((word) => word.charAt(0).toUpperCase())
.join(''); .join('');
} }
let imageError = $state(false);
function handleImageError() {
imageError = true;
}
</script> </script>
<Avatar class="size-26 md:size-32"> <div class="size-26 md:size-32 relative rounded-full overflow-hidden">
<Avatar.Image {src} class="h-full w-full rounded-full object-cover" /> {#if src && !imageError}
<img
<Avatar.Fallback> {src}
alt={name}
class="h-full w-full rounded-full object-cover"
onerror={handleImageError}
/>
{:else if !src || imageError}
<div class="bg-ecsess-400 flex h-full w-full items-center justify-center rounded-full"> <div class="bg-ecsess-400 flex h-full w-full items-center justify-center rounded-full">
<span class="text-ecsess-black text-xl font-bold"> {getInitials(name)} </span> <span class="text-ecsess-black text-xl font-bold"> {getInitials(name)} </span>
</div> </div>
</Avatar.Fallback> {/if}
</Avatar> </div>