Avatar

1import { cn } from "@/lib/utils";
2import { Avatar as AvatarPrimitive } from "@base-ui/react/avatar";
3 
4function Avatar({ className, ...props }: AvatarPrimitive.Root.Props) {
5  return (
6    <AvatarPrimitive.Root
7      data-slot="avatar"
8      className={cn(
9        "relative flex size-8 shrink-0 overflow-hidden rounded-full",
10        className
11      )}
12      {...props}
13    />
14  );
15}
16 
17function AvatarImage({ className, ...props }: AvatarPrimitive.Image.Props) {
18  return (
19    <AvatarPrimitive.Image
20      data-slot="avatar-image"
21      className={cn("aspect-square size-full", className)}
22      {...props}
23    />
24  );
25}
26 
27function AvatarFallback({
28  className,
29  ...props
30}: AvatarPrimitive.Fallback.Props) {
31  return (
32    <AvatarPrimitive.Fallback
33      data-slot="avatar-fallback"
34      className={cn(
35        "bg-muted flex items-center justify-center size-full rounded-full text-sm",
36        className
37      )}
38      {...props}
39    />
40  );
41}
42 
43export { Avatar, AvatarImage, AvatarFallback };