Avatar

1import type { ValidComponent } from "solid-js"
2import { splitProps } from "solid-js"
3 
4import * as ImagePrimitive from "@kobalte/core/image"
5import type { PolymorphicProps } from "@kobalte/core/polymorphic"
6 
7import { cn } from "~/lib/utils"
8 
9type AvatarRootProps<T extends ValidComponent = "span"> = ImagePrimitive.ImageRootProps<T> & {
10  class?: string | undefined
11}
12 
13const Avatar = <T extends ValidComponent = "span">(
14  props: PolymorphicProps<T, AvatarRootProps<T>>
15) => {
16  const [local, others] = splitProps(props as AvatarRootProps, ["class"])
17  return (
18    <ImagePrimitive.Root
19      class={cn("relative flex size-10 shrink-0 overflow-hidden rounded-full", local.class)}
20      {...others}
21    />
22  )
23}
24 
25type AvatarImageProps<T extends ValidComponent = "img"> = ImagePrimitive.ImageImgProps<T> & {
26  class?: string | undefined
27}
28 
29const AvatarImage = <T extends ValidComponent = "img">(
30  props: PolymorphicProps<T, AvatarImageProps<T>>
31) => {
32  const [local, others] = splitProps(props as AvatarImageProps, ["class"])
33  return <ImagePrimitive.Img class={cn("aspect-square size-full", local.class)} {...others} />
34}
35 
36type AvatarFallbackProps<T extends ValidComponent = "span"> =
37  ImagePrimitive.ImageFallbackProps<T> & { class?: string | undefined }
38 
39const AvatarFallback = <T extends ValidComponent = "span">(
40  props: PolymorphicProps<T, AvatarFallbackProps<T>>
41) => {
42  const [local, others] = splitProps(props as AvatarFallbackProps, ["class"])
43  return (
44    <ImagePrimitive.Fallback
45      class={cn("flex size-full items-center justify-center bg-muted", local.class)}
46      {...others}
47    />
48  )
49}
50 
51export { Avatar, AvatarImage, AvatarFallback }