Avatar

1import { Avatar as AvatarPrimitive } from "@sprawlify/solid/avatar";2import { type ComponentProps, splitProps } from "solid-js";3import { cn } from "@/lib/utils";4import { sprawlify } from "@sprawlify/solid";56function Avatar(7  props: ComponentProps<typeof AvatarPrimitive.Root> & {8    size?: "default" | "sm" | "lg";9  },10) {11  const [local, others] = splitProps(props, ["class", "size"]);12  const size = () => local.size ?? "default";1314  return (15    <AvatarPrimitive.Root16      data-slot="avatar"17      data-size={size()}18      class={cn(19        "group/avatar relative flex size-8 shrink-0 rounded-full select-none data-[size=lg]:size-10 data-[size=sm]:size-6",20        local.class,21      )}22      {...others}23    />24  );25}2627function AvatarImage(props: ComponentProps<typeof AvatarPrimitive.Image>) {28  const [local, others] = splitProps(props, ["class"]);2930  return (31    <AvatarPrimitive.Image32      data-slot="avatar-image"33      class={cn("aspect-square rounded-[inherit] size-full overflow-hidden", local.class)}34      {...others}35    />36  );37}3839function AvatarFallback(props: ComponentProps<typeof AvatarPrimitive.Fallback>) {40  const [local, others] = splitProps(props, ["class"]);4142  return (43    <AvatarPrimitive.Fallback44      data-slot="avatar-fallback"45      class={cn(46        "rounded-[inherit] overflow-hidden bg-muted text-muted-foreground flex size-full items-center justify-center rounded-full text-sm group-data-[size=sm]/avatar:text-xs",47        local.class,48      )}49      {...others}50    />51  );52}5354function AvatarBadge(props: ComponentProps<typeof sprawlify.span>) {55  const [local, others] = splitProps(props, ["class"]);5657  return (58    <sprawlify.span59      data-scope="avatar"60      data-part="badge"61      data-slot="avatar-badge"62      class={cn(63        "bg-primary text-primary-foreground ring-background absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full ring-2 select-none",64        "group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden",65        "group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2",66        "group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2",67        local.class,68      )}69      {...others}70    />71  );72}7374function AvatarGroup(props: ComponentProps<typeof sprawlify.div>) {75  const [local, others] = splitProps(props, ["class"]);7677  return (78    <sprawlify.div79      data-scope="avatar"80      data-paert="group"81      data-slot="avatar-group"82      class={cn(83        "*:data-[slot=avatar]:ring-background group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2",84        local.class,85      )}86      {...others}87    />88  );89}9091function AvatarGroupCount(props: ComponentProps<typeof sprawlify.div>) {92  const [local, others] = splitProps(props, ["class"]);9394  return (95    <sprawlify.div96      data-scope="avatar"97      data-paert="group-count"98      data-slot="avatar-group-count"99      class={cn(100        "bg-muted text-muted-foreground ring-background relative flex size-8 shrink-0 items-center justify-center rounded-full text-sm ring-2 group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3",101        local.class,102      )}103      {...others}104    />105  );106}107108export { Avatar, AvatarImage, AvatarFallback, AvatarBadge, AvatarGroup, AvatarGroupCount };109