working on the frontend

web/src/lib/components/ui/avatar/avatar-fallback.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+    import {Avatar as AvatarPrimitive} from "bits-ui";
+    import {cn} from "$lib/utils.js";
+
+    let {
+        class: className,
+        ref = $bindable(null),
+        ...restProps
+    }: AvatarPrimitive.FallbackProps = $props();
+</script>
+
+<AvatarPrimitive.Fallback
+        {...restProps}
+        bind:ref
+        class={cn("bg-muted flex size-full items-center justify-center", className)}
+/>

web/src/lib/components/ui/avatar/avatar-image.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+    import {Avatar as AvatarPrimitive} from "bits-ui";
+    import {cn} from "$lib/utils.js";
+
+    let {
+        class: className,
+        src,
+        alt,
+        ref = $bindable(null),
+        ...restProps
+    }: AvatarPrimitive.ImageProps = $props();
+</script>
+
+<AvatarPrimitive.Image
+        {...restProps}
+        {alt}
+        bind:ref
+        class={cn("aspect-square size-full", className)}
+        {src}
+/>

web/src/lib/components/ui/avatar/avatar.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+    import {Avatar as AvatarPrimitive} from "bits-ui";
+    import {cn} from "$lib/utils.js";
+
+    let {
+        class: className,
+        ref = $bindable(null),
+        loadingStatus = $bindable("loading"),
+        ...restProps
+    }: AvatarPrimitive.RootProps = $props();
+</script>
+
+<AvatarPrimitive.Root
+        {...restProps}
+        bind:loadingStatus
+        bind:ref
+        class={cn("relative flex size-10 shrink-0 overflow-hidden rounded-full", className)}
+/>

web/src/lib/components/ui/avatar/index.ts

@@ -0,0 +1,13 @@
+import Root from "./avatar.svelte";
+import Image from "./avatar-image.svelte";
+import Fallback from "./avatar-fallback.svelte";
+
+export {
+    Root,
+    Image,
+    Fallback,
+    //
+    Root as Avatar,
+    Image as AvatarImage,
+    Fallback as AvatarFallback,
+};