avatar

1import * as ImagePrimitive from "@kobalte/core/image";
2import type { PolymorphicProps } from "@kobalte/core/polymorphic";
3 
4import { cn } from "~/lib/utils.ts";
5import type { Component, ComponentProps, ValidComponent } from "solid-js";
6 
7import { splitProps } from "solid-js";
8 
9type AvatarRootProps<T extends ValidComponent = "span"> =
10  & ImagePrimitive.ImageRootProps<T>
11  & {
12    class?: string | undefined;
13    size?: "default" | "sm" | "lg";
14  };
15 
16const Avatar = <T extends ValidComponent = "span">(
17  props: PolymorphicProps<T, AvatarRootProps<T>>,
18) => {
19  const [local, others] = splitProps(props as AvatarRootProps, [
20    "class",
21    "size",
22  ]);
23  return (
24    <ImagePrimitive.Root
25      data-slot="avatar"
26      data-size={local.size ?? "default"}
27      class={cn(
28        "size-8 rounded-full after:rounded-full data-[size=lg]:size-10 data-[size=sm]:size-6 group/avatar relative flex shrink-0 select-none after:absolute after:inset-0 after:border after:border-border after:mix-blend-darken dark:after:mix-blend-lighten",
29        local.class,
30      )}
31      {...others}
32    />
33  );
34};
35 
36type AvatarImageProps<T extends ValidComponent = "img"> =
37  & ImagePrimitive.ImageImgProps<T>
38  & {
39    class?: string | undefined;
40  };
41 
42const AvatarImage = <T extends ValidComponent = "img">(
43  props: PolymorphicProps<T, AvatarImageProps<T>>,
44) => {
45  const [local, others] = splitProps(props as AvatarImageProps, ["class"]);
46  return (
47    <ImagePrimitive.Img
48      data-slot="avatar-image"
49      class={cn(
50        "rounded-full aspect-square size-full object-cover",
51        local.class,
52      )}
53      {...others}
54    />
55  );
56};
57 
58type AvatarFallbackProps<T extends ValidComponent = "span"> =
59  & ImagePrimitive.ImageFallbackProps<T>
60  & { class?: string | undefined };
61 
62const AvatarFallback = <T extends ValidComponent = "span">(
63  props: PolymorphicProps<T, AvatarFallbackProps<T>>,
64) => {
65  const [local, others] = splitProps(props as AvatarFallbackProps, ["class"]);
66  return (
67    <ImagePrimitive.Fallback
68      data-slot="avatar-fallback"
69      class={cn(
70        "bg-muted text-muted-foreground rounded-full flex size-full items-center justify-center text-sm group-data-[size=sm]/avatar:text-xs",
71        local.class,
72      )}
73      {...others}
74    />
75  );
76};
77 
78const AvatarBadge: Component<ComponentProps<"span">> = (props) => {
79  const [local, others] = splitProps(props, ["class"]);
80  return (
81    <span
82      data-slot="avatar-badge"
83      class={cn(
84// … truncated