Avatar

1import type { Component, JSX } from "solid-js";
2import { Show, createSignal, splitProps } from "solid-js";
3import { cn } from "~/lib/utils";
4 
5const Avatar: Component<JSX.HTMLAttributes<HTMLSpanElement>> = (props) => {
6  const [local, rest] = splitProps(props, ["class"]);
7  return (
8    <span
9      class={cn("relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full", local.class)}
10      {...rest}
11    />
12  );
13};
14 
15type AvatarImageProps = JSX.ImgHTMLAttributes<HTMLImageElement>;
16 
17const AvatarImage: Component<AvatarImageProps> = (props) => {
18  const [local, rest] = splitProps(props, ["class", "src", "alt", "onError"]);
19  const [error, setError] = createSignal(false);
20 
21  return (
22    <Show when={!error()}>
23      {/* biome-ignore lint/a11y/useAltText: alt forwarded via local.alt — callers provide meaningful text */}
24      <img
25        class={cn("aspect-square h-full w-full object-cover", local.class)}
26        src={local.src}
27        alt={local.alt ?? ""}
28        onError={(e) => {
29          setError(true);
30          if (typeof local.onError === "function") {
31            local.onError(e);
32          }
33        }}
34        {...rest}
35      />
36    </Show>
37  );
38};
39 
40const AvatarFallback: Component<JSX.HTMLAttributes<HTMLSpanElement>> = (props) => {
41  const [local, rest] = splitProps(props, ["class"]);
42  return (
43    <span
44      class={cn(
45        "flex h-full w-full items-center justify-center rounded-full bg-muted text-sm font-medium",
46        local.class,
47      )}
48      {...rest}
49    />
50  );
51};
52 
53export { Avatar, AvatarImage, AvatarFallback };