Avatar

1
import type { PolymorphicProps } from "@kobalte/core/polymorphic";
2
import type { ValidComponent } from "solid-js";
3

4
import { splitProps } from "solid-js";
5
import * as ImagePrimitive from "@kobalte/core/image";
6

7
import { cn } from "~/lib/utils";
8

9
type AvatarRootProps<T extends ValidComponent = "span"> =
10
  ImagePrimitive.ImageRootProps<T> & {
11
    class?: string | undefined;
12
  };
13

14
const Avatar = <T extends ValidComponent = "span">(
15
  props: PolymorphicProps<T, AvatarRootProps<T>>,
16
) => {
17
  const [local, others] = splitProps(props as AvatarRootProps, ["class"]);
18
  return (
19
    <ImagePrimitive.Root
20
      data-slot="avatar"
21
      class={cn(
22
        "relative flex size-10 shrink-0 overflow-hidden rounded-full outline-2 outline-border",
23
        local.class,
24
      )}
25
      {...others}
26
    />
27
  );
28
};
29

30
type AvatarImageProps<T extends ValidComponent = "img"> =
31
  ImagePrimitive.ImageImgProps<T> & {
32
    class?: string | undefined;
33
  };
34

35
const AvatarImage = <T extends ValidComponent = "img">(
36
  props: PolymorphicProps<T, AvatarImageProps<T>>,
37
) => {
38
  const [local, others] = splitProps(props as AvatarImageProps, ["class"]);
39
  return (
40
    <ImagePrimitive.Img
41
      data-slot="avatar-image"
42
      class={cn("aspect-square size-full", local.class)}
43
      {...others}
44
    />
45
  );
46
};
47

48
type AvatarFallbackProps<T extends ValidComponent = "span"> =
49
  ImagePrimitive.ImageFallbackProps<T> & { class?: string | undefined };
50

51
const AvatarFallback = <T extends ValidComponent = "span">(
52
  props: PolymorphicProps<T, AvatarFallbackProps<T>>,
53
) => {
54
  const [local, others] = splitProps(props as AvatarFallbackProps, ["class"]);
55
  return (
56
    <ImagePrimitive.Fallback
57
      data-slot="avatar-fallback"
58
      class={cn(
59
        "flex size-full items-center justify-center rounded-full bg-secondary-background font-base text-foreground",
60
        local.class,
61
      )}
62
      {...others}
63
    />
64
  );
65
};
66

67
export { Avatar, AvatarImage, AvatarFallback };